百度地图API实现地图应用

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

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

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

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

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

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

<div id="mapContainer" style="width:500px;height:400px;border:1px solid gray;"></div>

<script>
function initialize() {
//创建地图实例
var map = new BMap.Map('mapContainer');  //地图渲染到了id="mapContainer"的DOM元素上
//创建一个坐标
var point =new BMap.Point(113.946567,22.531604);
//地图初始化，设置中心点坐标和地图级别
map.centerAndZoom(point,14);
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));  //替换掉标注的图片
var marker = new BMap.Marker(point,{icon: myIcon}); 　　　　　 // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
//map.enableKeyboard(); // 启用键盘操作。
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl({
anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角
offset : new BMap.Size(290,10) //进一步控制缩放按钮的水平竖直偏移量
})); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加缩略地图控件
map.addControl(new BMap.MapTypeControl( {
anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角
offset : new BMap.Size(160,10) //进一步控制缩放按钮的水平竖直偏移量
})); //地图类型
var label = new BMap.Label("深圳赛动生物自动化有限公司",{offset:new BMap.Size(15,-20)});
marker.setLabel(label); //添加公司label
}

window.onload = initialize;
</script>

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

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

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

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

<style>.anchorBL{display:none;}</style>

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

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

百度地图API实现地图应用

猜你喜欢