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

JOJORiny

已于 2024-01-05 09:56:49 修改

阅读量680

点赞数

文章标签： vue.js javascript 前端地图 Google

于 2023-03-15 16:56:05 首次发布

本文链接：https://blog.csdn.net/qq_45963071/article/details/129560592

版权

本文介绍了如何利用谷歌地图的JavaScriptAPI来绘制图形，如多边形，并通过`google.maps.geometry.poly.containsLocation`方法检查图形范围内包含哪些标记点。文章详细讲解了设置绘制模式、监听绘制事件以及处理路径的方法。

摘要由CSDN通过智能技术生成

有一个需求用谷歌地图绘制一个图形，获取图形范围内有哪些标记点。我试着看谷歌地图的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);
      }
    })
}