JS 百度地图 换地图主题颜色（自定义）
JS 百度地图 换地图主题颜色（自定义）
可通过这个在线编辑得到自己想要的主题：https://developer.baidu.com/map/custom/
<div id="allmap"></div>
自定义主题文件：
var mapStyleBrown =[{
"featureType": "land",
"elementType": "geometry",
"stylers": {
"color": "#0b1b2bff"
}
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": {
"color": "#1c3345ff"
}
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": {
"color": "#ffffff66",
"weight": 10
}
}, {
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff1a"
}
}, {
"featureType": "green",
"elementType": "geometry",
"stylers": {
"color": "#1422151a"
}
}, {
"featureType": "building",
"elementType": "geometry.fill",
"stylers": {
"color": "#4a90e21a"
}
}, {
"featureType": "building",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
"color": "#12223d33"
}
}, {
"featureType": "manmade",
"elementType": "labels.text.fill",
"stylers": {
"color": "#ffffff26"
}
}, {
"featureType": "manmade",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "subwaystation",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "education",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "education",
"elementType": "labels.text.fill",
"stylers": {
"color": "#ffffff26",
"weight": 10
}
}, {
"featureType": "education",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "medical",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "medical",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "scenicspots",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "scenicspots",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "entertainment",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "estate",
"elementType": "geometry",
"stylers": {
"color": "#4a90e226"
}
}, {
"featureType": "shopping",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "transportation",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "transportation",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "highway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "nationalway",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "nationalway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "provincialway",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "provincialway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff00"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "cityhighway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "arterial",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "tertiaryway",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "tertiaryway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff00"
}
}, {
"featureType": "fourlevelway",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "fourlevelway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff00"
}
}, {
"featureType": "local",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "local",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff00"
}
}, {
"featureType": "scenicspotsway",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "scenicspotsway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "universityway",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "universityway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "vacationway",
"elementType": "geometry.fill",
"stylers": {
"color": "#1b344eff"
}
}, {
"featureType": "vacationway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "railway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e2ff",
"weight": 10
}
}, {
"featureType": "subwaylabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "subwaylabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiarywaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiarywaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "provincialwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "provincialwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highwaysign",
"elementType": "labels.text.fill",
"stylers": {
"weight": 10
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels.text.fill",
"stylers": {
"weight": 10
}
}, {
"featureType": "provincialwaysign",
"elementType": "labels.text.fill",
"stylers": {
"weight": 10
}
}, {
"featureType": "highway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffa"
}
}, {
"featureType": "nationalway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e2ff",
"weight": 10
}
}, {
"featureType": "nationalway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff1a"
}
}, {
"featureType": "provincialway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e2ff",
"weight": 10
}
}, {
"featureType": "provincialway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff1a"
}
}, {
"featureType": "cityhighway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e2ff",
"weight": 10
}
}, {
"featureType": "cityhighway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff1a"
}
}, {
"featureType": "arterial",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e2ff",
"weight": 10
}
}, {
"featureType": "arterial",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff1a"
}
}, {
"featureType": "arterial",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "tertiaryway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e2ff",
"weight": 10
}
}, {
"featureType": "tertiaryway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff1a"
}
}, {
"featureType": "tertiaryway",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "fourlevelway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e2ff",
"weight": 10
}
}, {
"featureType": "fourlevelway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff1a"
}
}, {
"featureType": "fourlevelway",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "local",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e2ff",
"weight": 10
}
}, {
"featureType": "local",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff1a"
}
}, {
"featureType": "local",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "airportlabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "airportlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "scenicspotslabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "scenicspotslabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "educationlabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e240"
}
}, {
"featureType": "educationlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "educationlabel",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "medicallabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "medicallabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "entertainmentlabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "entertainmentlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "estatelabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e299"
}
}, {
"featureType": "estatelabel",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff00"
}
}, {
"featureType": "estatelabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "businesstowerlabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "businesstowerlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "companylabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "companylabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "governmentlabel",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e266"
}
}, {
"featureType": "governmentlabel",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "governmentlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poilabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poilabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "restaurantlabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "restaurantlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "hotellabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "hotellabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "shoppinglabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "shoppinglabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "carservicelabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "carservicelabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "lifeservicelabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "lifeservicelabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "transportationlabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "transportationlabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "financelabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "financelabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "continent",
"elementType": "labels.text.fill",
"stylers": {
"color": "#333333ff"
}
}, {
"featureType": "continent",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffffff"
}
}, {
"featureType": "city",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e280"
}
}, {
"featureType": "city",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff1a"
}
}, {
"featureType": "city",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "district",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "town",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e280"
}
}, {
"featureType": "town",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff0"
}
}, {
"featureType": "village",
"elementType": "labels.text.fill",
"stylers": {
"color": "#4a90e280"
}
}, {
"featureType": "village",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff00"
}
}, {
"featureType": "educationlabel",
"elementType": "labels.text",
"stylers": {
"fontsize": 28
}
}, {
"featureType": "governmentlabel",
"elementType": "labels.text",
"stylers": {
"fontsize": 28
}
}, {
"featureType": "roadarrow",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "educationlabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "education",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}]
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(113.350512, 23.191744),12);
map.enableScrollWheelZoom(); map.setMapStyleV2({styleJson:eval("mapStyleBrown")});
JS 百度地图 换地图主题颜色（API自带）
JS 百度地图 换地图主题颜色（自定义）的更多相关文章
- JS 百度地图 换地图主题颜色（API自带）
JS 百度地图 换地图主题颜色(API自带) <script type="text/javascript" src="http://api.map.baidu.co ...
- 【百度地图API】如何给自定义覆盖物添加事件
原文:[百度地图API]如何给自定义覆盖物添加事件 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...
- JS 百度地图 地图线路描绘
JS 百度地图 地图线路描绘 <script type="text/javascript" src="http://api.map.baidu.com/api?v= ...
- JS 百度地图路书---动态路线
JS 百度地图路书---动态路线 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" con ...
- 【百度地图API】如何制作自定义样式的公交导航结果面板？
原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...
- Echarts 地图（map）插件之 省份的颜色自定义
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...
- JS 百度地图-右键菜单
JS 百度地图-右键菜单 /*-----------------标注右键删除-------------------------*/ var markerMenu = new BMap.ContextM ...
- OpenLayers加载百度离线瓦片地图（完美无偏移）
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
- leaflet中如何优雅的解决百度、高德地图的偏移问题
话不多说,先上效果图 以前在做项目时,经常会听到客户说,你们这个地图是哪来的,太丑了,能不能换成百度地图--高德也行-- 大家生活中,基本上都已经习惯了使用百度地图和高德地图,而在做项目时,用这两个地 ...
随机推荐
- 算法习题---4-2正方形（UVa201）
一:题目 判断一个点阵中含有几个正方形(数正方形) 如图例中:有2个边长为1的正方形,1个边长为2的正方形 (一)题目详解 (二)样例输入 4 表示每行每列各有4个顶点 16 表示整个点阵中共有16条 ...
- CSS3 @font-face详细用法
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了!肯定 ...
- iOS-AppDelegate详解
项目中AppDelegate详解 1.AppDelegate.h //模板默认引入程序需要使用“类”的框架,即UIKit.h头文件,使它包含在程序中 #import <UIKit/UIKit.h ...
- win7/Ubuntu双系统给Ubuntu扩大硬盘
问题 电脑上装了windows 7和ubuntu双系统,起初分配硬盘的时候,给ubuntu划分的量较少,如今硬盘空间已不够用,另外挂载分区也不够方便.希望能在不重装系统的情况下,从win7的硬盘中分一 ...
- Centos安装Python3及设置对应版本pip
安装Python3 安装Python依赖: yum -y install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel ...
- SpringBoot中使用 RabbitMQ -测试
本章主要建立在已经安装好Erlang以及RabbitMQ的基础上,接下来,简单介绍一下使用 1.首先到RabbitMQ的管理界面新建一个队列(Direct模式) 2.测试项目的基础结构如下: 这里为了 ...
- 第一周——不同java 的发展史你，注定成为不了领袖型人才
James Gosling 1991年,James 高斯林在Sun公司的工程师小组想要设计这样一种小型计算机语言,该语言主要用于电视盒的消费类电子产品上.另外,由于不同的厂商选择不同的CPU和操作 ...
- typescript无法识别vue中的$refs
例如:vue-fullscreen <template> <div class="Test"> <fullscreen ref="fulls ...
- mysql支持emoji表情符存储
一.教你如何让数据库支持emoji表情符存储 解决方式: 更换字符集utf8-->utf8mb4 问题描述: 前台应用抓取微博信息,每天总有几条数据插入不成功.应用日志显示: java.sql. ...
- 【转帖】史上最全PostgreSQL体系结构
史上最全PostgreSQL体系结构 2019年07月16日 18:00:00 Enmotech 阅读数 35 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...