包含的 JavaScript 片段应该执行以下操作:
当用户点击 map 时，初始化 headMarker 并在其周围绘制一个圆(多边形)
当用户在圆圈内点击时，初始化 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&v=2&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>
上面例子的截图:
我使用菱形而不是圆形，因为它们更容易在 v2 API 中绘制。请注意，如果多边形不是使用 clickable: false 选项创建的，则 click 监听器的 latlng 参数将为 null。
关于javascript - 在 Google map 中点击多边形内部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2865351/