地图计算自定义区域中心点坐标并添加点位图标

最新推荐文章于 2025-11-06 11:39:06 发布

原创最新推荐文章于 2025-11-06 11:39:06 发布 · 982 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一种计算给定地理坐标区域中心点的方法，并展示了如何使用这些中心点在地图上添加带有特定图标的标记。此外，还提供了一个示例代码，包括计算中心点的算法和如何在地图上显示这些点。

methods:{
	addPoint(){ 
	//所要计算的区域坐标数组
	var nurseryList=[
	   [{"lng":119.51973599999998,"lat":25.971432991526807},
	    {"lng":119.51520899999997,"lat":25.971432991526807},
	    {"lng":119.51520899999997,"lat":25.96829899159945},
	    {"lng":119.51973599999998,"lat":25.96829899159945},
	    {"lng":119.51973599999998,"lat":25.971432991526807}],
	   [{"lng":119.51173599999998,"lat":25.971432991526807},
	    {"lng":119.51720899999997,"lat":25.971432991526807},
	    {"lng":119.51020899999997,"lat":25.96829899159945}]]
	        var centerPonint= nurseryList.map(item=>{
	         return this.calculateCenter(item)
	        })
        // 在地图上添加点标记
        var myIcon=new  BMapGL.Icon(require('@/assets/img/nurseryPoint.png'), new BMapGL.Size(54, 58));
        //遍历中心点
        centerPonint.map(item=>{
           pt=new BMapGL.Point(item.lng,item.lat)
          marker=new BMapGL.Marker(pt, {
            icon: myIcon
          })
          //为点添加点击事件
          marker.addEventListener('click', function () {
            _that.getInfoWindow(res, item, 1)
          })
          this.map.addOverlay(marker);
        })
        },
   //计算区域中心点的方法
  calculateCenter(lnglatarr){
      var total = lnglatarr.length;
      var X=0,Y=0,Z=0;
      $.each(lnglatarr, function(index, lnglat) {
        var lng = lnglat.lng * Math.PI / 180;
        var lat = lnglat.lat * Math.PI / 180;
        var x,y,z;
        x = Math.cos(lat) * Math.cos(lng);
        y = Math.cos(lat) * Math.sin(lng);
        z = Math.sin(lat);
        X += x;
        Y += y;
        Z += z;
      });

      X = X/total;
      Y = Y/total;
      Z = Z/total;

      var Lng = Math.atan2(Y,X);
      var Hyp = Math.sqrt(X*X + Y*Y);
      var Lat = Math.atan2(Z,Hyp);
      //返回的数据格式根据你自己的需要改变
      return {"lng":Lng*180/Math.PI,"lat":Lat*180/Math.PI};
    }
    }