Question

..对不起我的英语。

我正在尝试使用google maps api v3创建圆圈不填充。我知道我可以设置不透明度（并填充不足），但这个不可见的填充仍然是可点击的。我需要设置填充不可点击，但笔画必须是可点击的。例如，在我的圆圈下，有几个点和线，必须是可点击的，圆是上面的，而不是线。我的想法是将圆圈移动到不同的窗格，但我找不到如何做到这一点。有解决方案吗？

谢谢！ Ajax的

[编辑]

这是代码示例。我的问题是，我无法点击蓝色圆圈内的地图或线条。

  <!DOCTYPE html>
  <html>
  <head>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_GMAP+API_KEY&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {
        var lat = 49;
        var lon = 15;

        var myOptions = {
          center: new google.maps.LatLng(lat,lon),
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        google.maps.event.addListener(map, "click", function(clickEvt) {
            alert('mapClicked');
        });

        var line = new google.maps.Polyline({
            path: [new google.maps.LatLng(lat + 0.001, lon + 0.001),new google.maps.LatLng(lat - 0.001, lon - 0.001)],
            strokeColor: '#00FF00',
            map: map
        });

        google.maps.event.addListener(line, "click", function() {
            alert('Line clicked'); 
        });

        var circle = new google.maps.Circle({
            strokeColor: '#0000FF',
            strokeWeight: 2,
            fillOpacity: 0,
            map: map,
            center: new google.maps.LatLng(lat, lon),
            radius: 100
        });


        google.maps.event.addListener(circle, 'click', function(event) {       
            alert('circle clicked');
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Answer 1

在圆形选项对象中设置'clickable：false'，以允许在地图图层中检测到click事件。

var circle = new google.maps.Circle({
    strokeColor: '#0000FF',
    strokeWeight: 2,
    fillOpacity: 0,
    map: map,
    center: new google.maps.LatLng(lat, lon),
    radius: 100,
    clickable: false
});

参考：Unclickable fill in Circle?

Answer 2

试试这个：绘制2个圆圈，一个用于轮廓（可点击），另一个用于填充（不可点击）。填充圆应略小，并将其z-index设置为位于另一个之上，从而阻止您单击除轮廓圆之外的任何内容。问题在于您希望在圆圈下方保持可点击的其他项目。

Google Maps api v3 - 无填充或无法填充的圆圈

2 个答案: