Javascript 在谷歌地图中单击多边形内部_Javascript_Google Maps_Click_Overlay

Javascript 在谷歌地图中单击多边形内部

javascript google-maps

Javascript 在谷歌地图中单击多边形内部,javascript,google-maps,click,overlay,Javascript,Google Maps,Click,Overlay,包含的JavaScript代码段应执行以下操作：当用户单击地图时，初始化headMarker并在其周围绘制一个圆（多边形）当用户在圆圈内单击时，初始化tailMarker并在这两个标记之间绘制路径 1正如预期的那样正在发生。但是当用户在圆圈内单击时，在函数（覆盖，点）中，覆盖为非空，而点为空。因此，代码无法初始化尾标记谁能告诉我一条出路吗 GEvent.addListener(map, "click", function(overlay,point) { if (isCreateH

包含的JavaScript代码段应执行以下操作：

当用户单击地图时，初始化headMarker并在其周围绘制一个圆（多边形）

当用户在圆圈内单击时，初始化tailMarker并在这两个标记之间绘制路径

1正如预期的那样正在发生。但是当用户在圆圈内单击时，在

函数（覆盖，点）

中，

覆盖

为非空，而

点

为空。因此，代码无法初始化尾标记

谁能告诉我一条出路吗

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

选项。下面是我用来回答的一个例子：


谷歌地图在多边形内点击
VarMap=新的GMap2（document.getElementById（“map”）；
赛特中心地图（新格拉特林（37.4419，-122.1419），13）；
addListener（映射，“单击”，函数（覆盖，latlng）{
var lat=latlng.lat（）；
var lon=latlng.lng（）；
var latOffset=0.01；
var lonOffset=0.01；
var polygon=新的GPolygon([
新玻璃（横向、纵向和纵向），
新玻璃（横向+横向偏移，纵向），
新玻璃（横向、纵向+纵向），
新玻璃（横向-横向偏移，lon），
新玻璃（横向、纵向-横向）
]，“#f33f00”，5，1，“#ff0000”，0.2，{可点击：假}）；
添加叠加（多边形）；
});

上述示例的屏幕截图：

我使用了菱形而不是圆形，因为在v2 API中它们更容易绘制。请注意，如果多边形不是使用

clickable:false

选项创建的，则

click

侦听器的

latlng

参数将为空。

非常感谢。它起作用了。奇怪的是，你必须设置clickable:false来启用点击（我原以为会是clickable:true）@amarsh anand:Yes，基本上通过设置它

clickable:false

你告诉API，恰好在多边形上的点击应该作为对地图的点击来处理，而不是对多边形的点击。

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