添加控件前,地图需要进行初始化。例如,要将标准地图控件添加到地图中,可在代码中添加如下内容:
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl());2.添加多个控件
在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后,它们即刻生效。
map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用初始化控件时,可提供一个可选参数,其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置,即控件停靠在地图的哪个角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整自己的位置。
var opts = {offset: new BMap.Size(150, 5)} map.addControl(new BMap.ScaleControl(opts)); 7.个性化地图个性化地图样式编辑器
通过样式ID调用个性化地图样式(推荐)
1.创建个性化地图样式
进入地图开放平台控制台页面,在我的地图中,创建一个地图样式:
2.编辑样式
点击创建的地图样式,进入样式编辑器,根据您的需求自由编辑地图样式:
3.发布样式并获取样式ID
完成编辑后,在我的地图或者编辑器中发布该地图样式,获取发布后生成的样式ID:
4.在JavaScript API中应用地图样式
将第三步中获取的样式ID作为setMapStyleV2方法的参数。
相关代码如下:
map.setMapStyleV2({ styleId: '3d71dc5a4ce6222d3396801dee06622d' });注意:
1.使用个性化地图前,请参考Hello World构建基础地图;
2.setMapStyleV2方法需要在地图初始化(centerAndZoom)完成后执行;
3.样式更新不会改变样式ID。因此如果有更新样式的需求,重新编辑发布就可以完成更新。不需要修改JavaScript API调用代码;
4.如果样式ID在控制台中被删除,但JavaScript API还在继续调用。那么将会渲染默认样式的地图;
通过样式JSON调用个性化地图样式
1.获取样式JSON
前序流程和样式ID调用地图样式流程一致,进入我的地图,创建一个地图样式,进入编辑器编辑完成后,直接通过编辑器中的“下载JSON”功能获取JSON代码:
2.在JavaScript API中应用地图样式
将上一步中获取的样式JSON作为setMapStyleV2方法的参数。
相关代码如下:
var styleJson = []; map.setMapStyleV2({styleJson:styleJson});设置后地图效果如下:
上面这些都是一些简单的使用,后续我在使用的过程中遇到的一些问题以及解决过程,新的API的使用会持续更新分享,百度地图的API开发文档给的还是很全面的,不过就是目前他提供的都是一些在线开发,对于一些内网的公司就不太友好了,所以后续这块我需要去做一下离线开发的研究,等我把离线地图开发弄好之后,再给大家分享。
感谢诸君的观看,文中如有纰漏,欢迎在评论区来交流。如果这篇文章帮助到了你,欢迎点赞
分类: 技术点: 相关文章:
Vue中使用百度地图——设置地图标注
2021-08-07
【百度地图API】——如何让标注自动呈现在最佳视野内
2021-08-07
【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍
2021-08-07
Wireshark使用介绍(一):Wireshark基本用法
2021-08-07
Docker 使用指南 (一)—— 基本操作
2021-08-07
不用程序生成一个百度地图 - Tiger_gogogo
2021-08-07
百度地图API:利用瓦片生成工具,自定义背景图片
2021-08-07
创建地图-百度地图生成器API
2021-08-07
【HTML】使用百度地图api制作地图热力图,带控件,进阶版
2021-08-07
Cordova基本使用(一) - yangboom
2021-08-06