百度地图API基本使用(一) (2)

添加控件前,地图需要进行初始化。例如,要将标准地图控件添加到地图中,可在代码中添加如下内容:

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的切换功能才能可用

image.png

初始化控件时,可提供一个可选参数,其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置,即控件停靠在地图的哪个角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整自己的位置。

var opts = {offset: new BMap.Size(150, 5)} map.addControl(new BMap.ScaleControl(opts)); 7.个性化地图

个性化地图样式编辑器

通过样式ID调用个性化地图样式(推荐)

1.创建个性化地图样式

进入地图开放平台控制台页面,在我的地图中,创建一个地图样式:

image.png


2.编辑样式

点击创建的地图样式,进入样式编辑器,根据您的需求自由编辑地图样式:

image.png


3.发布样式并获取样式ID

完成编辑后,在我的地图或者编辑器中发布该地图样式,获取发布后生成的样式ID:

image.png


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代码:

image.png

2.在JavaScript API中应用地图样式

将上一步中获取的样式JSON作为setMapStyleV2方法的参数。

相关代码如下:

var styleJson = []; map.setMapStyleV2({styleJson:styleJson});

设置后地图效果如下:

image.png

上面这些都是一些简单的使用,后续我在使用的过程中遇到的一些问题以及解决过程,新的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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyxzxs.html