百度地图API使用：展示附近1公里范围内的目标，按行政区、县划分轮廓界限

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

需求1：展示附近1公里范围内的目标

• 从DB中检索附近一公里内的数据，并在百度地图展示；

  Note: 主要用于从本地数据表中查询符合条件的目标；

效果展示

总结

(1) 覆盖物样式设置

// 圆形覆盖物
var circle = new BMap.Circle(center, radius,
  {
    strokeColor: "#1abc9c", StrokeStyle: "solid", strokeWeight: 1, strokeOpacity: 0.8, // 轮廓
    fillColor: "#1abc9c", fillOpacity: 0.5, // 填充
    enableEditing: true // 是否启用形状编辑
  });

(2) 判断点是否在圆中

GeoUtils.js提供若干几何算法，用来帮助用户判断点与矩形、圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。基于Baidu Map API 1.2。 @author Baidu Map Api Group 这里主要用到其中判断点是否在圆中的方法：BMapLib.GeoUtils.isPointInCircle(point, circle);

(3) 为圆形覆盖物添加lineupdate监听事件

当覆盖物形状改变时，动态渲染marker；

Note: 需要在覆盖物中设置enableEditing: true;

(4) 设置覆盖物是否可被清除

circle.disableMassClear(); // 禁止circle在 map.clearOverlays 方法中被清除
map.clearOverlays();  // 结合circle.disableMassClear(); 清除所有marker而保留circle；

Source Code: Github

需求2：按行政区、县划分轮廓界限

在百度地图上，分级，按行政区、县划分轮廓界限；

一开始拿到这一需求后，先查阅了相关资料，结果基本都指向了悟空找房，果然不错，随即确认了眼神。向各大找房网站学习~~

效果展示

总结

(1) 自定义覆盖物 主要解决了以下几个问题：

1. 标注位置、样式；
2. 根据放大级别显示不同的标注覆盖物；

(2) 调用百度API获取指定区域边界数据；

官方Demo

var plys = [];
var bdary = new BMap.Boundary();
bdary.get(省区县名, function (rs) {
    var count = rs.boundaries.length;
    //建立多边形覆盖物
    for (var i = 0; i < count; i++) {
        var ply = new BMap.Polygon(rs.boundaries[i], {
            strokeWeight: 2,
            strokeOpacity: 0.8,
            StrokeStyle: "solid",
            strokeColor: "#1abc9c",
            fillColor: "#16a085",
            fillOpacity: 0.2
        });
        plys.push(ply);
        map.addOverlay(ply);  //添加覆盖物
    }
});

(3) 显示、隐藏轮廓边界；

为避免重复调用接口，并多次渲染地图边界，对边界点调用show(), hide()方法，实现轮廓边界的显示与隐藏。

// 显示轮廓
for (var i = 0; i < plys.length; i++) {
    plys[i].show();
}

// 隐藏轮廓
for (var i = 0; i < plys.length; i++) {
    plys[i].hide();
}

(4) mouseover和mouseout在鼠标悬浮时多次触发；

问题的根源在子元素，一句话说明 mouseover与mouseenter 的区别：

无论鼠标穿过被选元素或其子元素，都会触发 `mouseover` 事件。
仅当鼠标穿过被选元素时，才会触发 `mouseenter` 事件。

所以将 mouseover改为mouseenter，mouseout改为mouseleave，即可达到目的。

Reference

Source Code: Github

---

If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!