vue谷歌地图用api获取绘制的图形范围内的标记点

有一个需求用谷歌地图绘制一个图形,获取图形范围内有哪些标记点。我试着看谷歌地图的js文档,发现里面有此类的功能。

文档链接:谷歌地图api

我来分享一下使用方法:


//核心方法
google.maps.geometry.poly.containsLocation('经纬度对象', '图形实例')

let graphicalPath = [];
let graphicalExample = null;//绘制图形的实例
let package_list = [];//标记点数据
function setDrawingModes() {
  //开始实例化绘制工具库
  let drawingModesList = {
    MARKER: google.maps.drawing.OverlayType.MARKER,
    CIRCLE: google.maps.drawing.OverlayType.CIRCLE,
    POLYGON: google.maps.drawing.OverlayType.POLYGON,
    POLYLINE: google.maps.drawing.OverlayType.POLYLINE,
    RECTANGLE: google.maps.drawing.OverlayType.RECTANGLE,
  };
  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [drawingModesList.POLYGON],
    },
    polygonOptions: {
      fillColor: "blue",
      strokeColor: "blue",
      strokeOpacity: 0.8,
      fillOpacity: 0.4,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
    polylineOptions: {
      fillColor: "blue",
      strokeColor: "blue",
      strokeOpacity: 0.8,
      fillOpacity: 0.4,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });
  drawingManager.setMap(map);
  //监听绘制多边形完成事件事件
  google.maps.event.addListener(drawingManager, "polygoncomplete", (e) => {
    let path = e.getPath().getArray();
      //存在就清除上一个图形
      if (graphicalExample) {
       graphicalExample.setMap(null);
      }
      graphicalExample = e;
      setPath(path);
      //监听回显图形每一个路径点
      google.maps.event.addListener(e.getPath(), "insert_at", (event) => {
        setPath(path);
      });
      google.maps.event.addListener(e.getPath(), "set_at", (event) => {
        setPath(path);
      });
    //绘制完成后关闭绘制状态
    drawingManager.setDrawingMode(null);
  });
}

function setPath(path) {
  let graphicalPath = []
    path.forEach((v) => {
      graphicalPath.push({ lat: v.lat(), lng: v.lng() })
    })
    package_list.forEach(v=>{
      //graphicalExample图形实例
      if(google.maps.geometry.poly.containsLocation({ lat: v.lat*1, lng: v.long*1 }, graphicalExample) == true){
        //等于true就在图形范围内
        console.log(v);
      }
    })
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 高德地图 API 提供了 `AMap.MouseTool` 类,可以用来绘制矢量图形。下面是一个简单的示例: ``` <template> <div id="map-container" style="height: 500px;"></div> </template> <script> export default { data() { return { map: null, mouseTool: null }; }, mounted() { // 加载地图 this.map = new AMap.Map('map-container', { zoom: 13, // 缩放级别 center: [116.397428, 39.90923] // 地图中心 }); // 创建 MouseTool 实例 this.mouseTool = new AMap.MouseTool(this.map); // 监听绘制事件 AMap.event.addListener(this.mouseTool, 'draw', e => { // 获取绘制的矢量图形对象 const shape = e.obj; // 在地图上显示矢量图形 this.map.add(shape); }); }, methods: { // 开始绘制矢量图形 startDraw(type) { this.mouseTool[type](); } } }; </script> ``` 在上面的示例中,我们首先创建了一个地图实例并将其渲染到页面上。然后,我们创建了一个 MouseTool 实例,并在绘制事件中获取绘制的矢量图形对象并将其添加到地图上。最后,我们提供了一个 `startDraw` 方法,用于开始绘制不同类型的矢量图形。 可以通过调用 `startDraw` 方法来开始绘制矢量图形。例如,要绘制一个圆形,可以在模板中添加一个按钮并将其与 `startDraw` 方法关联: ``` <template> <div> <div id="map-container" style="height: 500px;"></div> <button @click="startDraw('circle')">绘制圆形</button> </div> </template> ``` 这将在地图上启动圆形绘制工具。其他可用的绘制工具包括 `rectangle`(矩形)、`polygon`(多边形)和 `polyline`(折线)。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JOJORiny

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值