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中如何优雅的解决百度、高德地图的偏移问题
话不多说,先上效果图 以前在做项目时,经常会听到客户说,你们这个地图是哪来的,太丑了,能不能换成百度地图--高德也行-- 大家生活中,基本上都已经习惯了使用百度地图和高德地图,而在做项目时,用这两个地 ...
随机推荐
- Qt编写自定义控件41-自定义环形图
一.前言 自定义环形图控件类似于自定义饼状图控件,也是提供一个饼图区域展示占比,其实核心都是根据自动计算到的百分比绘制饼图区域.当前环形图控件模仿的是echart中的环形图控件,提供双层环形图,有一层 ...
- jmeter -- beanshell 执行本地py文件
Process proc = Runtime.getRuntime().exec("python /Users/lucax/Desktop/工作/Ai双师项目/性能优化迭代_脚本准备/获取学 ...
- iOS 越狱后OpenSSH安装报错
转载自:https://www.jianshu.com/p/75f6d0f54d61 安装OpenSSH报错 尝试重启手机重新安装 将手机语言设置为英文状态 将手机设置为飞行模式,用wifi下载(我的 ...
- Spring Boot中一个Servlet主动断开连接的方法
主动断开连接,从而返回结果给客户端,并且能够继续执行剩余代码. 对于一个HttpServletResponse类型的对象response来说,执行如下代码: response.getWriter(). ...
- Linux - 对比net-tools与iproute2
简介 net-tools包含ifconfig.route.arp和netstat等命令行工具,用于管理和排查各种网络配置. 起源于BSD TCP/IP工具箱,旨在配置老式Linux内核的网络功能. 自 ...
- Docker容器中用户权限管理
在Linux系统中有一部分知识非常重要,就是关于权限的管理控制:Linux系统的权限管理是由uid和gid负责,Linux系统会检查创建进程的uid和gid,以确定它是否有足够的权限修改文件,而非是通 ...
- 【VS开发】fatal error C1853: "Debug\sift.pch"预编译头文件来自编译器的早期版本
fatal error C1853: "Debug\sift.pch"预编译头文件来自编译器的早期版本 <pre id="best-content-12991040 ...
- MAC OS brew的使用
brew 是 Mac 下的一个包管理工具,类似于 centos 下的 yum,可以很方便地进行安装/卸载/更新各种软件包,例如:nodejs, elasticsearch, kibana, mysql ...
- hupu面试
1.mybatis更新一条数据时,如果某字段为空,则不更新它,使用默认值? <update id="updateProduct" parameterType="Pr ...
- webkit浏览器下改变滚动条样式
/*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ba ...