javascript – 在Google地图中单击多边形内部

2019-07-10 09:33:33 阅读：209 来源： 互联网

标签：javascript click google-maps overlay

包含的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&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>

以上示例的屏幕截图：

我使用钻石代替圆圈,因为它们更容易在v2 API中绘制.请注意,如果未使用clickable：false选项创建多边形,则单击侦听器的latlng参数将为null.

标签：javascript,click,google-maps,overlay
来源： https://codeday.me/bug/20190710/1422550.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 在Google地图中单击多边形内部