调用百度地图画圈并标出属于圈内的点位信息

最新推荐文章于 2024-09-05 15:23:24 发布

码奴王红兵

最新推荐文章于 2024-09-05 15:23:24 发布

阅读量1.4k

点赞数 2

分类专栏： Vue 百度地图画圈标记圈内点文章标签： vue

本文链接：https://blog.csdn.net/WHB20126/article/details/115455053

版权

Vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

百度地图画圈标记圈内点

1 篇文章 0 订阅

订阅专栏

直接上代码：

fanweiss(){
      // 画圈
  var aaa = this.gaojingData
  debugger
  var map = new BMap.Map("ydmap");            // 创建Map实例
  var mPoint = new BMap.Point(this.gaojingData.longitude, this.gaojingData.latitude);  //中心点
  map.setMapStyle({ style: "midnight" });
  map.enableScrollWheelZoom();
  map.centerAndZoom(mPoint,15);
  let sl = this
  var circle = new BMap.Circle(mPoint,(this.gonglishu)*1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
    map.addOverlay(circle);
    listXiaofangliliang({ xftype: null }).then((response) => {
      response.rows.forEach(el=>{
      var bianjie = new BMap.Point(el.longitude,el.latitude);   
      var distance = map.getDistance(bianjie,mPoint); //计算两点之间的距离、mPoint是圈的中心点
      debugger
      if(distance/1000 < sl.gonglishu){  //gonglishu 这个是半径、判断两点之间的距离是否小于当前圈的半径，小于当前半径说明改点在圈内
          //var marker1 = new BMap.Marker(new BMap.Point(el.longitude, el.latitude));
          // 在地图上添加点标记
          var icon = new BMap.Icon(
            require("./img/zhongdui.gif"),
            new BMap.Size(80, 102),
            {
              //20，30是图片大小
              anchor: new BMap.Size(10, 0), //这个是信息窗口位置（可以改改看看效果）
            }
          );
          if(el.xftype=="7"){
            var marker1 = new BMap.Marker(
              new BMap.Point(el.longitude, el.latitude),
              {
                icon: icon,
              }
            );
            map.addOverlay(marker1);
          }
      }
      })
    })
    
    },

效果：