Question

google.maps.event.addListener(drawingManager, "polygoncomplete", function (polygon) {
         document.getElementById("cordinates").innerHTML = polygon.getPath().getArray(); 

          google.maps.event.addListener(polygon.getPath(), "insert_at", function () { document.getElementById("cordinates").innerHTML =polygon.getPath().getArray(); } )
          google.maps.event.addListener(polygon.getPath(), "remove_at", function () { document.getElementById("cordinates").innerHTML =polygon.getPath().getArray(); } )
          google.maps.event.addListener(polygon.getPath(), "set_at", function () { document.getElementById("cordinates").innerHTML = polygon.getPath().getArray(); } )

我有那个代码部分，我想检查那个多边形内部的一些点，但我已经尝试google.maps.geometry.poly.containsLocation(point, polygon) 该代码，但我有问题polygon，我不知道如何从drawingmanager调用该多边形。我不知道从drawingmanager

中找到polygon的引用

Answer 1

以下示例演示了如何使用google.maps.geometry.poly.containsLocation函数：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var sydneyLoc = new google.maps.LatLng(-33.868220, 151.201211); 

  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/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);


  google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {

      
      if(google.maps.geometry.poly.containsLocation(sydneyLoc, polygon) == true) {
          document.getElementById('result').innerHTML = 'Sydney city is located inside your polygon';
       }

  });
}

html, body {
     height: 100%;
     margin: 0;
     padding: 0;
}

#map {
     height: 320px;
}

<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=drawing&callback=initMap"
            async defer></script>
<div id="map"></div>
Info:<div id="result" />

Answer 2

我有同样的情况，幸运的是，我发现以下工作 Example

JavaScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 24.886, lng: -70.269},
    zoom: 5,
  });

  var triangleCoords = [
    {lat: 25.774, lng: -80.19},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});

  google.maps.event.addListener(map, 'click', function(e) {
    var resultColor =
        google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ?
        'blue' :
        'red';

    var resultPath =
        google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ?
        // A triangle.
        "m 0 -1 l 1 2 -2 0 z" :
        google.maps.SymbolPath.CIRCLE;

    new google.maps.Marker({
      position: e.latLng,
      map: map,
      icon: {
        path: resultPath,
        fillColor: resultColor,
        fillOpacity: .2,
        strokeColor: 'white',
        strokeWeight: .5,
        scale: 10
      }
    });
  });
}

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
         async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

如何在DrawingManager中使用containsLocation（）

2 个答案: