包含的JavaScript代码段应该执行以下操作：
>当用户点击地图时,初始化headMarker并在其周围绘制一个圆(多边形)
>当用户在圆圈内单击时,初始化tailMarker并绘制这两个标记之间的路径
1正如预期的那样发生.但是当用户在圆圈内部点击时,在函数(叠加,点)中,叠加非空,而point为null.因此,代码无法初始化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选项创建多边形,则单击侦听器的latlng参数将为null.