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

最新推荐文章于 2024-02-28 15:54:28 发布

大胡子码农

最新推荐文章于 2024-02-28 15:54:28 发布

阅读量1.7k

点赞数 2

分类专栏： Jacascript 前端文章标签：百度

本文链接：https://blog.csdn.net/cherrycmd/article/details/123010412

版权

Jacascript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

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

实现思路如下：

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 <= pt.lat && pt.lat < poly[i].lat)) &&
        (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
        (c = !c);
    return c;
}

完整代码如下(HTML 代码)：

<html>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>百度地图画多边形</title>
</head>
<body>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3"></script>
</head>
<body onLoad="initialize()">
  <div id="map_canvas" style="width: 700px; height: 500px;"></div>
</body>
</html>

完整代码如下(JS 代码)：

<script type="text/javascript">
/**
*date 20140815
*author cherry.chen
*desc demo for baidu api mutiple marker
**/
var map; // map 对象
var index = 1;
var color = ['#000000','#A200FF','#0000FF','#008200','#2e4987']; //多区域标记色块
var polygon = [];
function initialize() {
  // 百度地图API功能
    map = new BMap.Map("map_canvas");
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
    map.enableScrollWheelZoom();                            //启用滚轮放大缩小
    map.addControl(new BMap.MapTypeControl());   
        //添加地图类型控件
    //map.setMapType(BMAP_SATELLITE_MAP);
      var point = new BMap.Point(108.896, 34.330);    // 创建点坐标
    map.centerAndZoom(point,15);              // 初始化地图,设置中心点坐标和地图级别。
    var obj = new Object();
    obj.lat = point.lat;
    obj.lng = point.lng;
    obj.number = 0;
    obj.map = map;
    initDymamicArea(obj); //初始化地图
    //绑定右键事件
    map.addEventListener("rightclick", function(e){ 
        if(index > 3){
            alert("最多添加4个区域");
            return;
        }
         var pt = new BMap.Point(e.point.lng, e.point.lat);
         var res = false;
         if(polygon.length > 0){
            for(var i=0;i<polygon.length;i++){
                console.log(polygon[i].getBounds());
                res = isInsidePolygon(pt, polygon[i].getPath());
                if(res) break;
            }
         }
         if(res){
            alert("区域重叠");
            return;
         }
         var obj  = new Object();
            obj.lat = e.point.lat;
            obj.lng = e.point.lng
            obj.number = index;
            obj.map = map;
            initDymamicArea(obj); 
            index++;
      });
       
}

/**
* 
* 判断某个点是否在一个特定的区域内
* @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 <= pt.lat && pt.lat < poly[i].lat)) &&
        (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
        (c = !c);
    return c;
} 



function initDymamicArea(obj){
    var lat = obj.lat;
    var lng = obj.lng;
    var x1 = lat + 0.002;
    var x2 = lat - 0.002;
    var y1 = lng + 0.002;
    var y2 = lng - 0.002;
    
    var secRing = [];
    secRing.push(new BMap.Point(y1,x1));
    secRing.push(new BMap.Point(y1,x2));
    secRing.push(new BMap.Point(y2,x2));
    secRing.push(new BMap.Point(y2,x1));
    
     polygon[obj.number] = new BMap.Polygon(
        secRing, 
        {
            strokeColor:color[obj.number],
            fillColor:"#AAAAAA",
            strokeWeight:3, 
            strokeOpacity:0,
            fillOpacity:0
        }
        );
    polygon[obj.number].enableEditing();
    obj.map.addOverlay(polygon[obj.number]);
} 
</script>

对于标记多区域的触发事件你可以自己修改，这里只是一个前端的demo,如果你需要保存这些巨型区域的顶点信息，可以通过polygon.getPath() 这个函数得到，你可以选择在点击按钮时得到，或者是给 polygon 添加鼠标离开事件(mouseout),在鼠标离开时得到这个区域的顶点信息。

demo 到这里就完了。

大胡子码农

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度地图API实现多区域标记

最近遇到一个业务就是需要需要在地图上标记多个区域。一般餐饮业做外卖的，配送范围一般是多区域的，那么在地图上标记配送范围的时候就需要能标记多个区域。长话短说，最初的实现原型的截图如下：实现思路如下：1.根据百度地图API 手册先初始化地图：百度地图JSAPI 2.0类参考2.动态添加标记小区域(此处是给地图绑定鼠标右键事件，当点击鼠标右键时就会动态创建一个矩形区域) ，期原理就是当鼠标在地图上右键点击的时候，就会得到该点在地图上的经纬度坐标，然后以这个经纬度坐标为中心绘制出矩形区域。3.在
复制链接

扫一扫