百度地图API实现地图应用

灰太狼 2021-09-18 10:22 815阅读 0赞

企业官网上需要用到地图应用，这里对百度地图API的使用做点笔记，好记性不如烂笔头。

实现地图应用的流程如下：

1、**获取密钥**；教程网址 [https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html][https_jingyan.baidu.com_article_363872eccda8286e4aa16f4e.html]

2、在html的head头部**引入百度地图的API**，如

3、根据API文档**创建容器、绘制地图、添加各种控件**。详细如下代码

开发中遇到的一些问题的记录：

1、如何获取目标点的坐标点（地图中心点，比如公司位置坐标）？？百度地图提供了一个坐标拾取器工具界面，可以参考使用教程获取：[https://jingyan.baidu.com/article/f96699bbafdccc894e3c1b8b.html][https_jingyan.baidu.com_article_f96699bbafdccc894e3c1b8b.html]

2、默认是没有鼠标滚动缩放大小、平移缩放、缩略地图、比例尺、标注、三维地图类型等功能，需要如上述代码分别添加。

3、如何隐藏左下角地图的版权信息？？如下

4、在标注旁显示公司名的标注，更换标注的图标

var label = new BMap.Label("深圳赛动生物自动化有限公司",{offset:new BMap.Size(15,-20)});
    marker.setLabel(label); //添加公司label
    
    
    var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
    var marker2 = new BMap.Marker(point, {icon: myIcon}); 
    map.addOverlay(marker2);

5、右下角的缩略地图是折叠的，怎么保持常开？？

map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加缩略地图控件

6、百度离线地图开发待完善？？

百度地图API使用官网：http://lbsyun.baidu.com/index.php?title=jspopular/guide/maplayer

网络教程参考网址：[https://www.cnblogs.com/yfsmooth/p/4695831.html][https_www.cnblogs.com_yfsmooth_p_4695831.html]

**这里附加一个迅速地图实现的工具：[http://api.map.baidu.com/lbsapi/creatmap/index.html][http_api.map.baidu.com_lbsapi_creatmap_index.html] 可以直接配置参数获取代码**

[https_jingyan.baidu.com_article_363872eccda8286e4aa16f4e.html]: https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html
[https_jingyan.baidu.com_article_f96699bbafdccc894e3c1b8b.html]: https://jingyan.baidu.com/article/f96699bbafdccc894e3c1b8b.html
[https_www.cnblogs.com_yfsmooth_p_4695831.html]: https://www.cnblogs.com/yfsmooth/p/4695831.html
[http_api.map.baidu.com_lbsapi_creatmap_index.html]: http://api.map.baidu.com/lbsapi/creatmap/index.html