百度地图API实现多区域标记

最新推荐文章于 2024-05-22 21:54:15 发布

原创

最新推荐文章于 2024-05-22 21:54:15 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#百度

这篇博客介绍了一个使用百度地图API在网页上动态标记多个配送区域的方法。通过监听鼠标右键事件，获取点击位置并绘制矩形区域，同时检查新区域是否与已有区域重叠。代码示例中包含了初始化地图、添加标记、判断点是否在区域内等关键功能，并提供了限制添加区域数量的逻辑。此外，还讨论了如何获取和保存区域顶点信息。

最近遇到一个业务就是需要需要在地图上标记多个区域。一般餐饮业做外卖的，配送范围一般是多区域的，那么在地图上标记配送范围的时候就需要能标记多个区域。长话短说，最初的实现原型的截图如下：

实现思路如下：

1.根据百度地图API 手册先初始化地图：百度地图JSAPI 2.0类参考

2.动态添加标记小区域(此处是给地图绑定鼠标右键事件，当点击鼠标右键时就会动态创建一个矩形区域) ，期原理就是当鼠标在地图上右键点击的时候，就会得到该点在地图上的经纬度坐标，然后以这个经纬度坐标为中心绘制出矩形区域。

3.在添加矩形区域的时候需要判断，右键的这个经纬度坐标是否在已经标记的矩形区域内，如果在则给出提示，当然对于添加的个数你可以自己控制。在这里有一个关键的函数就是判断某个点知否在一个特定的区域。这个代码如下：

/**
* 
* 判断某个点是否在一个特定的区域内
* @params pt 经纬度坐标
* @params poly 区域的顶点坐标点
* @return bool true | false
*/

function isInsidePolygon(pt, poly){
    for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) 
        ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat &