百度个性化地图如何在网页中使用？

个性化地图引入到网页中有三种方式：

一种是引入个性化编辑器中编辑好的地图json样式文件
第二种是直接复制样式ID到js中
第三种通过百度地图提供的样式模板，选择地图，然后通过JavaScriptAPI的setMapStyle方法调用生效

一、引入地图JSON样式文件

第一步：进入百度地图开放平台（百度搜索），在导航开发文档中选择JavaScript API，在打开的页面中选择示例DEMO

第二步：进入示例页面选择个性化地图，把源代码编辑器中的代码复制到自己的项目中

1.复制引用的百度地图API文件,其中您的密钥申请方法请自行参考百度地图官网申请密钥的方法

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

2.复制地图容器demo,样式自己写

<div id="allmap"></div>

3.复制创建的地图内容

<script type="text/javascript">var map = new BMap.Map("allmap");             //创建一个地图实例，引号里的是demo容器的id名称map.centerAndZoom(new BMap.Point(116.404269,39.916042), 12);            //地图中心点坐标map.enableScrollWheelZoom();                         //启用滚轮放大缩小var styleJson = [{这里面放在个性化地图编辑器里设置好的样式json代码}]map.setMapStyleV2({styleJson:styleJson});
<script>

第三步：在百度地图个性化编辑器中设置自定义地图样式，设置好的样式，在右侧下载json样式代码，复制到上面第二步中的
var styleJson = [{ 这里面放在个性化地图编辑器里设置好的样式json代码 }]里面，刷新页面，就可以看到自己自定义的地图样式了。

JSON引入示例代码如下：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#allmap{width:100%;height:500px;}p{margin-left:5px; font-size:14px;}</style><script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"></script><title>个性化地图</title>
</head>
<body><div id="allmap"></div><p>个性化底图V2样式可通过<a href='/customv2/help.html' target="_blank">个性化在线编辑器</a>编辑获取</p>
</body>
</html>
<script type="text/javascript">var map = new BMap.Map('allmap');map.centerAndZoom(new BMap.Point(116.404269,39.916042), 12);map.enableScrollWheelZoom();                         //启用滚轮放大缩小var styleJson = [{'featureType': 'land','elementType': 'geometry','stylers': {'visibility': 'on','color': '#ffffffff'}}, {'featureType': 'water','elementType': 'geometry','stylers': {'visibility': 'on','color': '#ff5400ff'}}, {'featureType': 'green','elementType': 'geometry','stylers': {'visibility': 'on','color': '#ff54006e'}}, {'featureType': 'building','elementType': 'geometry','stylers': {'visibility': 'on'}}, {'featureType': 'building','elementType': 'geometry.fill','stylers': {'color': '#ffffffb3'}}, {'featureType': 'building','elementType': 'geometry.stroke','stylers': {'color': '#dadadab3'}}, {'featureType': 'subwaystation','elementType': 'geometry','stylers': {'visibility': 'on','color': '#b15454B2'}}, {'featureType': 'education','elementType': 'geometry','stylers': {'visibility': 'on','color': '#e4f1f1ff'}}, {'featureType': 'medical','elementType': 'geometry','stylers': {'visibility': 'on','color': '#f0dedeff'}}, {'featureType': 'scenicspots','elementType': 'geometry','stylers': {'visibility': 'on','color': '#e2efe5ff'}}, {'featureType': 'highway','elementType': 'geometry','stylers': {'visibility': 'on','weight': 4}}, {'featureType': 'highway','elementType': 'geometry.fill','stylers': {'color': '#f7c54dff'}}, {'featureType': 'highway','elementType': 'geometry.stroke','stylers': {'color': '#fed669ff'}}, {'featureType': 'highway','elementType': 'labels','stylers': {'visibility': 'on'}}, {'featureType': 'highway','elementType': 'labels.text.fill','stylers': {'color': '#8f5a33ff'}}, {'featureType': 'highway','elementType': 'labels.text.stroke','stylers': {'color': '#ffffffff'}}, {'featureType': 'highway','elementType': 'labels.icon','stylers': {'visibility': 'on'}}, {'featureType': 'arterial','elementType': 'geometry','stylers': {'visibility': 'on','weight': 2}}, {'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#d8d8d8ff'}}, {'featureType': 'arterial','elementType': 'geometry.stroke','stylers': {'color': '#ffeebbff'}}, {'featureType': 'arterial','elementType': 'labels','stylers': {'visibility': 'on'}}, {'featureType': 'arterial','elementType': 'labels.text.fill','stylers': {'color': '#525355ff'}}, {'featureType': 'arterial','elementType': 'labels.text.stroke','stylers': {'color': '#ffffffff'}}, {'featureType': 'local','elementType': 'geometry','stylers': {'visibility': 'on','weight': 1}}, {'featureType': 'local','elementType': 'geometry.fill','stylers': {'color': '#d8d8d8ff'}}, {'featureType': 'local','elementType': 'geometry.stroke','stylers': {'color': '#ffffffff'}}, {'featureType': 'local','elementType': 'labels','stylers': {'visibility': 'on'}}, {'featureType': 'local','elementType': 'labels.text.fill','stylers': {'color': '#979c9aff'}}, {'featureType': 'local','elementType': 'labels.text.stroke','stylers': {'color': '#ffffffff'}}, {'featureType': 'railway','elementType': 'geometry','stylers': {'visibility': 'on','weight': 1}}, {'featureType': 'railway','elementType': 'geometry.fill','stylers': {'color': '#949494ff'}}, {'featureType': 'railway','elementType': 'geometry.stroke','stylers': {'color': '#ffffffff'}}, {'featureType': 'subway','elementType': 'geometry','stylers': {'visibility': 'on','weight': 1}}, {'featureType': 'subway','elementType': 'geometry.fill','stylers': {'color': '#d8d8d8ff'}}, {'featureType': 'subway','elementType': 'geometry.stroke','stylers': {'color': '#ffffffff'}}, {'featureType': 'subway','elementType': 'labels','stylers': {'visibility': 'on'}}, {'featureType': 'subway','elementType': 'labels.text.fill','stylers': {'color': '#979c9aff'}}, {'featureType': 'subway','elementType': 'labels.text.stroke','stylers': {'color': '#ffffffff'}}, {'featureType': 'continent','elementType': 'labels','stylers': {'visibility': 'on'}}, {'featureType': 'continent','elementType': 'labels.icon','stylers': {'visibility': 'on'}}, {'featureType': 'continent','elementType': 'labels.text.fill','stylers': {'color': '#333333ff'}}, {'featureType': 'continent','elementType': 'labels.text.stroke','stylers': {'color': '#ffffffff'}}, {'featureType': 'city','elementType': 'labels.icon','stylers': {'visibility': 'on'}}, {'featureType': 'city','elementType': 'labels','stylers': {'visibility': 'on'}}, {'featureType': 'city','elementType': 'labels.text.fill','stylers': {'color': '#454d50ff'}}, {'featureType': 'city','elementType': 'labels.text.stroke','stylers': {'color': '#ffffffff'}}, {'featureType': 'town','elementType': 'labels.icon','stylers': {'visibility': 'on'}}, {'featureType': 'town','elementType': 'labels','stylers': {'visibility': 'on'}}, {'featureType': 'town','elementType': 'labels.text.fill','stylers': {'color': '#454d50ff'}}, {'featureType': 'town','elementType': 'labels.text.stroke','stylers': {'color': '#ffffffff'}}, {'featureType': 'road','elementType': 'geometry.fill','stylers': {'color': '#47434c8a'}}, {'featureType': 'road','elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'road','elementType': 'labels.text.stroke','stylers': {'color': '#ffffff00'}}, {'featureType': 'poilabel','elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'poilabel','elementType': 'labels.icon','stylers': {'visibility': 'off'}}, {'featureType': 'poilabel','elementType': 'labels.text.stroke','stylers': {'color': '#ffffff00'}}, {'featureType': 'road','elementType': 'labels.text.fill','stylers': {'color': '#8f8899ff'}}, {'featureType': 'districtlabel','elementType': 'labels.icon','stylers': {'visibility': 'off'}}, {'featureType': 'districtlabel','elementType': 'labels','stylers': {'visibility': 'on'}}, {'featureType': 'manmade','elementType': 'geometry','stylers': {'color': '#47434c24'}}];map.setMapStyleV2({styleJson:styleJson});
</script>

二、在JavaScript API中应用地图样式ID，具体代码如下

<script type="text/javascript">var map = new BMap.Map("allmap");             //创建一个地图实例，引号里的是demo容器的id名称map.centerAndZoom(new BMap.Point(116.404269,39.916042), 12);            //地图中心点坐标map.enableScrollWheelZoom();                         //启用滚轮放大缩小map.setMapStyleV2({     styleId: '79e1f2a285584707e1a4f571289b27e1'        //styleId中是个性化地图发布时生成的样式ID});
<script>

三、通过百度地图的样式模板生成地图

将style改为模板下方的英文名称

var mapStyle={  style : "*模板英文名称*" }
map.setMapStyle(mapStyle);

如下示例为：风格为midnight的设置方法

<script type="text/javascript">var map = new BMap.Map("allmap");             //创建一个地图实例，引号里的是demo容器的id名称map.centerAndZoom(new BMap.Point(116.404269,39.916042), 12);            //地图中心点坐标map.enableScrollWheelZoom();                         //启用滚轮放大缩小var mapStyle={  style : "midnight" }                    //模板英文名称map.setMapStyle(mapStyle);<script>

百度个性化地图如何在网页中使用？相关推荐

怎么使用万能地图下载器制作百度个性化地图绿地水系陆地篇
1. 概述水经注软件除了可以轻松下载无水印Google Earth卫星影像.有明确拍摄日期的历史影像.地方高清天地图.百度高德大字体打印地图,按1万/5千等国家标准图幅下载,对百度坐标与火星坐标进行 ...
Java读取mapinfo格式_求助：如何把mapinfo格式的地图数据放到网页中显示
声明,我可不是做广告哦 mapXtreme Java,是目前用于Internet或企业Intranet唯一的100%纯Java地图服务器.mapInfo mapXtreme Java与J2EE兼容,为 ...
百度地图升级6：添加百度个性化地图及注意事项！
首先说明一下百度的个性化地图建立百度账号(秘钥啥的就不说了,此文章为升级篇) 打开百度地图开放平台-登录-特色服务平台-个性化地图 http://lbsyun.baidu.com/api ...
如何让高德地图API的地图名片嵌入网页中并保持自动窗口大小和定位点居中
如题, 痛点:高德地图的地图API 地图名片功能官方的地址提供的设计接口固定了地图窗口的尺寸,嵌入到我们自己的网页中时,固定的尺寸大小导致显示异常,而且不能自适应屏幕尺寸和定位的居中解决方法: ...
制作新版离线百度个性化地图
1. 获得个性化地图样式json代码百度官方在线个性化地图编辑地址:http://lbsyun.baidu.com/index.php?title=open/custom 2. 根据上步获得的样式j ...
用百度开放地图api在代码中获得两地距离
示例: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" cont ...
php随机调用百度背景图片,如何在网页中调用岁月小筑随机图片API——背景图片...
简介本次以随机图片API中的环境背景图片为例子,调用地址为: https(推荐): https://img.xjh.me/random_img.php?type=bg&ctype=natur ...
php内嵌百度播放器,网页中内嵌的百度影音插件如何从网页中播放本地上的文件_html/css_WEB-ITnose...
求大神帮助.. 红色部分怎么弄才行. 回复讨论(解决方案) 这样应该不行吧. 用相对路径试试相对路径怎么弄. 这样应该不行吧. 用相对路径试试这样应该不行吧. 用相对路径试试放在同一目录也不行 ...
php内嵌百度播放器,网页中内嵌的百度影音插件如何从网页中播放本地上的文件_html/css_WEB-ITnose...
求大神帮助.. 红色部分怎么弄才行. 回复讨论(解决方案) 这样应该不行吧. 用相对路径试试相对路径怎么弄. 这样应该不行吧. 用相对路径试试这样应该不行吧. 用相对路径试试放在同一目录也不行 ...

百度个性化地图如何在网页中使用？

一、引入地图JSON样式文件

二、在JavaScript API中应用地图样式ID，具体代码如下

三、通过百度地图的样式模板生成地图

百度个性化地图如何在网页中使用？相关推荐

最新文章

热门文章