获取Polygon所有点的数组 - Google Maps绘图工具API-3 [英] Get Array of all points of Polygon - Google Maps Drawing Tool API-3

问题描述

我正在使用Google绘图工具在Google地图上绘制多边形/矩形，现在我需要显示落入绘制的多边形内的标记，并且为此我使用了geometry.poly.containsLocation方法，该方法需要一个点（latLng）和一个多边形点阵列。如果我使用maps.polygon，我可以通过poly.getPath（）获取多边形点，但因为我使用 Google绘图工具，它使用maps.drawing.DrawingManager / google.maps.drawing.OverlayType.POLYGON，所以不知道如何在这里找到要点。谢谢

  var drawingManager = new google.maps.drawing.DrawingManager（{
 drawingMode：google.maps.drawing。 OverlayType.POLYGON，
 drawingControl：true，
 drawingControlOptions：{
 position：google.maps.ControlPosition.TOP_CENTER，
 drawingModes：[
 google.maps.drawing。 OverlayType.MARKER，
 google.maps.drawing.OverlayType.CIRCLE，
 google.maps.drawing.OverlayType.POLYGON，
 google.maps.drawing.OverlayType.POLYLINE，
 google.maps.drawing.OverlayType.RECTANGLE 
] 
}，
 markerOptions：{
图标：'images / car-icon.png'
}，
 circleOptions：{
 fillColor：'＃ffff00'，
 fillOpacity：1，
 strokeWeight：5，
 clickable：false，
 editable：true，
 zIndex：1 
}，
 polygonOptions：{
 fillColor：'＃BCDCF9'，
 fillOpacity：0.5，
 strokeWeight：2，
 strokeColor ： '＃57ACF9'， 
 clickable：false，
 editable：false，
 zIndex：1 
} 
}）; 
 console.log（drawingManager）
 drawingManager.setMap（map）
  

解决方案

  google.maps.event.addListener（drawingManager，'polygoncomplete'，function（polygon）{
 //假设您想要div with id =info
 document.getElementById（'info'）。innerHTML + =polygon points：+< br>; 
 for（var i = 0; i< innerHTML + = polygon.getPath（）。getAt（i）.toUrlValue（6）+< br> getLength（）; i ++）{
 document.getElementById（'info'）。 ; 
} 
}）; 
  

概念证明小提琴

代码段：

  var geocoder; var map; var polygonArray = []; function initialize（）{map = new google.maps.Map（document.getElementById（map_canvas），{center：new google。 maps.LatLng（37.4419，-122.1419），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}）; var drawingManager = new google.maps.drawing.DrawingManager（{drawingMode：google.maps.drawing.OverlayType.POLYGON，drawingControl：true，drawingControlOptions：{position：google.maps.ControlPosition.TOP_CENTER，drawingModes：[google.maps.drawing .OverlayType.MARKER，google.maps.drawing.OverlayType.CIRCLE，google.maps.drawing.OverlayType.POLYGON，google.maps.drawing.OverlayType.POLYLINE，google.maps.drawing.OverlayType.RECTANGLE]}，/ * not {icon：'images / car-icon.png'}，* / circleOptions：{fillColor：'＃ffff00'，fillOpacity：1，strokeWeight：5，clickable：false，editable：true，zIndex：1 }，polygonOptions：{fillColor：'＃BCDCF9'，fillOpacity：0.5，strokeWeight：2，strokeColor：'＃57ACF9'，clickable：false，editable：false，zIndex：1}}）; console.log（drawingManager）drawingManager.setMap（map）google.maps.event.addListener（drawingManager，'polygoncomplete'，function（polygon）{document.getElementById（'info'）。innerHTML + =polygon points：+ < br>; for（var i = 0; i< polygon.getPath（）。getLength（）; i ++）{document.getElementById（'info'）。innerHTML + = polygon.getPath（）。getAt（i ）.toUrlValue（6）+< br>;} polygonArray.push（polygon）;}）;} google.maps.event.addDomListener（window，load，initialize）;  
  html，body，＃map_canvas {height：500px;宽度：500px; margin：0px; < script src =https：//  < div id =info>< / div>  

i am using Google Drawing tools for drawing polygon/rectangle on google maps, now i need to show markers that falls inside the drawn polygon and for that i am using geometry.poly.containsLocation method which takes a point(latLng) and an array of polygon points. if i use maps.polygon I can get polygon points via poly.getPath() but because i am using Google Drawing tools which uses maps.drawing.DrawingManager/google.maps.drawing.OverlayType.POLYGON so not sure how to find points here. Thanks

  var drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.POLYGON,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [
      google.maps.drawing.OverlayType.MARKER,
      google.maps.drawing.OverlayType.CIRCLE,
      google.maps.drawing.OverlayType.POLYGON,
      google.maps.drawing.OverlayType.POLYLINE,
      google.maps.drawing.OverlayType.RECTANGLE
    ]
  },
  markerOptions: {
    icon: 'images/car-icon.png'
  },
  circleOptions: {
    fillColor: '#ffff00',
    fillOpacity: 1,
    strokeWeight: 5,
    clickable: false,
    editable: true,
    zIndex: 1
  },
  polygonOptions: {
    fillColor: '#BCDCF9',
    fillOpacity: 0.5,
    strokeWeight: 2,
    strokeColor:'#57ACF9',
    clickable: false,
    editable: false,
    zIndex: 1
  }
});
console.log(drawingManager)
drawingManager.setMap(map)

解决方案

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
    // assuming you want the points in a div with id="info"
    document.getElementById('info').innerHTML += "polygon points:" + "<br>";
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
        document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
    }
});

proof of concept fiddle

code snippet:

var geocoder;
var map;
var polygonArray = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    /* not useful on jsfiddle
    markerOptions: {
      icon: 'images/car-icon.png'
    }, */
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    },
    polygonOptions: {
      fillColor: '#BCDCF9',
      fillOpacity: 0.5,
      strokeWeight: 2,
      strokeColor: '#57ACF9',
      clickable: false,
      editable: false,
      zIndex: 1
    }
  });
  console.log(drawingManager)
  drawingManager.setMap(map)

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    document.getElementById('info').innerHTML += "polygon points:" + "<br>";
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
      document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
    }
    polygonArray.push(polygon);
  });

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<div id="map_canvas" style=" border: 2px solid #3872ac;"></div>
<div id="info"></div>

这篇关于获取Polygon所有点的数组 - Google Maps绘图工具API-3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！