gpt4 book ai didi

javascript - 在 Google map 中点击多边形内部

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:37:33 26 4
gpt4 key购买 nike

包含的 JavaScript 片段应该执行以下操作:

  1. 当用户点击 map 时,初始化 headMarker 并在其周围绘制一个圆(多边形)

  2. 当用户在圆圈内点击时,初始化 tailMarker 并绘制这两个标记之间的路径

1 按预期发生。但是当用户在圆圈内点击时,在 function(overlay,point) 中,overlay 是非空的,而 point 是空的。因此,代码无法初始化 tailMarker。

谁能告诉我出路。

GEvent.addListener(map, "click", function(overlay,point) {
if (isCreateHeadPoint) {
// add the head marker
headMarker = new GMarker(point,{icon:redIcon,title:'0'});
map.addOverlay(headMarker);
isCreateHeadPoint = false;
// draw the circle
drawMapCircle(point.lat(),point.lng(),1,'#cc0000',2,0.8,'#0',0.1);
} else {
// add the tail marker
tailMarker = new GMarker(point,{icon:greenIcon,title:''});
map.addOverlay(tailMarker);
isCreateHeadPoint = true;
// load thes path from head to tail
direction.load("from:" + headMarker.getPoint().lat()+ ", " +
headMarker.getPoint().lng()+ " " +
"to:" + tailMarker.getPoint().lat() + "," +
tailMarker.getPoint().lng(),
{getPolyline:true});
}
});

最佳答案

您需要做的就是在圆的GPolygon 构造函数中设置clickable: false 选项。下面是我用来回答another similar question on Stack Overflow的例子:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Clicking Inside a Polygon</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 450px; height: 300px"></div>

<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

GEvent.addListener(map, "click", function(overlay, latlng) {
var lat = latlng.lat();
var lon = latlng.lng();
var latOffset = 0.01;
var lonOffset = 0.01;
var polygon = new GPolygon([
new GLatLng(lat, lon - lonOffset),
new GLatLng(lat + latOffset, lon),
new GLatLng(lat, lon + lonOffset),
new GLatLng(lat - latOffset, lon),
new GLatLng(lat, lon - lonOffset)
], "#f33f00", 5, 1, "#ff0000", 0.2, { clickable: false });

map.addOverlay(polygon);
});
</script>
</body>
</html>

上面例子的截图:

Google Maps Clicking Inside a Polygon

我使用菱形而不是圆形,因为它们更容易在 v2 API 中绘制。请注意,如果多边形不是使用 clickable: false 选项创建的,则 click 监听器的 latlng 参数将为 null。

关于javascript - 在 Google map 中点击多边形内部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2865351/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com