Google Maps多边形包含location True False
提问于 2016-02-04 02:29:56
我使用了Javascript+HTLM来显示用户位置，并在google maps上创建了多边形。我的问题是创建显示“用户在多边形中”和“用户不在多边形中”的标签/文本框。如果单击的点位于多边形内，则此示例代码将创建一个红点；如果单击的点位于多边形之外，则会创建一个绿点。我希望在文本框中显示"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);非常感谢你在这里提供的所有帮助。
回答 1
Stack Overflow用户
发布于 2016-02-04 22:13:03
我有一个名为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);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35191426
复制相关文章
![[754]ImportError: DLL load failed: 找不到指定的模块](https://ask.qcloudimg.com/http-save/yehe-4908043/wfbvwa8fo5.jpeg)
安装tensorflow时候报错ImportError: DLL load failed: 找不到指定的模块。Failed to load the native TensorFlow runtime.
![模块***已加载但找不到入口点DllRegisterServer,请确保***为有效的DLL或OCX文件，然后重试[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/43805eb5a0e737c0788ac2565f9e5fc2.jpg)
![pycharm下找不到要安装的模块包（如sqlalchemy）[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/c02e82f2b3b464b6c7db3d09d1b0d127.jpg)
![模块已加载,但找不到入口点DLLRegisterServer[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-1011815/6f61102a6e48b89084e8fd77fe248277.png)
点击加载更多
腾讯云开发者
