Question

我使用Javascript + HTLM来显示用户位置，并在google maps API上创建了多边形。我的问题是创建标签/文本框，显示“用户在多边形”和“用户不在多边形”。如果单击的点位于多边形中，此示例代码将创建一个红点，如果单击的点位于多边形之外，则为绿色点。我希望在文本框中显示“In polygon”“Out of polygon”而不是红色和绿色点，然后我可以将其记录到数据库中。

    <!DOCTYPE html>
    <html>
  <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon arrays</title>
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
  </style>
</head>
<body>
<div id="map"></div>
<script>

 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) ?
    'red' :
    'green';

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

</script>
<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&signed_in=true&libraries=geometry&callback=initMap"
     async defer></script>
</body>
</html>

我也尝试使用此代码在控制台中记录“True”或“False”，但不是在文本框中。

     google.maps.event.addListener(map, 'click', function(event) {
   console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
     });
     }

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

非常感谢这里的任何和所有帮助。

Answer 1

我有一个名为Label1的标签，并使用此代码，如果点在多边形中，则在标签中写入true;如果该点在多边形之外，则为false。

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

      google.maps.event.addListener(map, 'click', function (event) {
    document.getElementById("Label1").innerHTML =google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle);
        });

Google地图多边形包含的位置为真假

1 个答案: