最近在项目中用到了地图,包含了移动标注修改坐标位置,点击标注弹出提示框等等功能,在这里我就对百度地图的一个简单运用进行分享一下:
1.首先加载百度地图JS,在引用的时候需要用到自己的百度地图ak秘钥,这里我就用*号代替我的秘钥的显示了,各位使用自己的秘钥ak,具体如何生成秘钥ak,详情见百度地图 JavaScriptAPI----->获取秘钥。这里的秘钥指的就是ak码,具体如下:
// 加载百度地图js var script = document.createElement("script"); script.src = "http://api.map.baidu.com/api?v=2.0&ak=***************" + "*********"; //这种方式为v2.0版本的引用方式 document.body.appendChild(script);
2.创建一个地图实例(在创建地图实例的时候,如果报BMap is not defined的话,则证明百度地图的JS还没有加载完成,创建地图实例需要加一个延时setTimeout,当然,也有可能是网络状态不佳):
var mapParam.map = new BMap.Map("baiduMap",{enableMapClick: false});
其中的参数baiduMap是显示地图的dom节点的id,
<div id="baiduMap"></div>
第二个参数enableMapClisk设置为false,意味着当你点击地图上的某个覆盖物时(地铁、公交站,地区等等),不会出现公交、驾驶、等的线路规划窗口,如果不传该参数,默认是能查看线路规划窗口的
3. 设置地图的中心点坐标
point的参数分别为经度和纬度,centerAndZoom的两个参数,第一个参数是创建的点的坐标。第二个参数是设置地图的缩放级别。然后使用maker方法创建标注,当打开地图时。就能看到标注了
var point = new BMap.Point(longitude, mData.latitude); // 创建点坐标mapParam.map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别var marker= new BMap.Marker(point); // 创建标注