Google 地图多边形包含位置 True False答案

【问题标题】：Google Maps polygon contains location True FalseGoogle 地图多边形包含位置 True False
【发布时间】：2016-02-04 02:29:55
【问题描述】：

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

    <!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);

非常感谢您在这里提供的所有帮助。

【问题讨论】：

您的 HTML 中没有文本框。您是如何尝试将该文本放入文本框中的？您打算将其放入哪个文本框？
我只是在地图下面放了一个标签，我想显示结果。

标签： javascript html google-maps google-maps-api-3 polygon

【解决方案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);
        });

【讨论】：