百度地图 JS API 的实践总结

最新推荐文章于 2024-09-15 23:43:07 发布

weixin_30847271

最新推荐文章于 2024-09-15 23:43:07 发布

阅读量97

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/chaoyueqi/p/9783070.html

版权

在项目中常常会用到百度地图的JS API，以下内容是自己在实践过程中遇到问题的简要总结：

如：已经创建了一个map实例，var map = new BMap.Map("allmap")，其中，"allmap"是节点id
1.设置城市中心点

在初始化地图中心点时，最好不要使用中文地址名称，而是使用坐标，像这样：
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
否则可能出现设置使点显示在最佳视野的语句不起作用的情况。

2.使所有标注点显示在最佳视野中

map.setViewport(pointsArray);
其中：参数pointsArray是点（而不是覆盖物）的数组，点即通过new BMap.Point()语句实例得到的。
例如，通过如下方式得到点的数组：
var pointsArray = []；
pointsArray.push(new BMap.Point(parseFloat(经度), parseFloat(纬度)));
parseFloat是将其转换为浮点数

3.页面dom元素与地图上面覆盖物的联动

添加覆盖物，并创建数组存储覆盖物对象，再给dom节点添加鼠标移入移出事件，同时，通过索引来处理对应的覆盖物对象。（备注：当节点没有对应的坐标时，index就会无法正确对应）
var marker = new BMap.Marker(new BMap.Point(parseFloat(经度), parseFloat(纬度)));
var markerArray = [];
markerArray.push(marker);

$('#wrapper').off('mouseenter', 'a').on('mouseenter', 'a', function(ev) {
    var ind =  $(this).parents('tr').index();
    //设置点的弹跳动画
    pointsMarker[ind].setAnimation(BMAP_ANIMATION_BOUNCE);
});
$('#wrapper').on('mouseleave', 'a', function(ev) {
    var ind = $(this).parents('tr').index();
    //取消点的弹跳动画
    pointsMarker[ind].setAnimation();
});