Fatal编程技术网
  • google-maps-api-3/
  • Google maps api 3 谷歌地图api v3-无填充或不可填充的圆形

Google maps api 3 谷歌地图api v3-无填充或不可填充的圆形

google-maps-api-3

Google maps api 3 谷歌地图api v3-无填充或不可填充的圆形,google-maps-api-3,overlay,Google Maps Api 3,Overlay,。。对不起我的英语 我正在尝试使用google maps api v3创建无填充的圆圈。我知道我可以设置不透明度（并取消填充），但这种不可见填充仍然可以单击。我需要设置填充不可点击，但笔划必须可点击。例如，在我的圆圈下，有一些点和线必须是可点击的，圆圈比线更高。我的想法是将圆圈移动到不同的窗格，但我找不到方法。有解决办法吗 谢谢！ 阿贾克斯 [编辑] 下面是代码示例。我的问题是，我不能点击蓝色圆圈内的地图或线条 <!DOCTYPE html> <html> &

。。对不起我的英语

我正在尝试使用google maps api v3创建无填充的圆圈。我知道我可以设置不透明度（并取消填充），但这种不可见填充仍然可以单击。我需要设置填充不可点击，但笔划必须可点击。例如，在我的圆圈下，有一些点和线必须是可点击的，圆圈比线更高。我的想法是将圆圈移动到不同的窗格，但我找不到方法。有解决办法吗

谢谢！ 阿贾克斯

[编辑]

下面是代码示例。我的问题是，我不能点击蓝色圆圈内的地图或线条

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


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
函数初始化（）{
var-lat=49；
var-lon=15；
变量myOptions={
中心：新google.maps.LatLng（lat，lon），
缩放：18，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
google.maps.event.addListener（映射，“单击”，函数（clickEvt）{
警报（'mapClicked'）；
});
var line=新的google.maps.Polyline({
路径：[新的google.maps.LatLng（lat+0.001，lon+0.001），新的google.maps.LatLng（lat-0.001，lon-0.001）]，
strokeColor:“#00FF00”，
地图：地图
});
google.maps.event.addListener（第行，“单击”，函数（）{
警报（“单击行”）；
});
var circle=new google.maps.circle({
strokeColor:“#0000FF”，
冲程重量：2，
不透明度：0，
地图：地图，
中心：新google.maps.LatLng（lat，lon），
半径：100
});
google.maps.event.addListener（圆圈，'click'，函数（事件）{
警报（“单击圆圈”）；
});
}
试试这个：画两个圆圈，一个用于轮廓（可单击），一个用于填充（不可单击）。填充圆应该稍微小一点，并将其z索引设置为位于另一个圆的顶部，以防止单击除轮廓圆以外的任何对象。问题是你想在圆圈下面保持可点击的其他项目。

试试这个：画两个圆圈，一个用于轮廓（可点击），一个用于填充（不可点击）。填充圆应该稍微小一点，并将其z索引设置为位于另一个圆的顶部，以防止单击除轮廓圆以外的任何对象。问题是您希望在圆圈下方保持可单击的其他项目。

在圆圈选项对象中设置“clickable:false”，以允许在地图层中检测到单击事件

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
});
参考：

在圆形选项对象中设置“clickable:false”，以允许在地图层中检测单击事件

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
});
参考资料：

如果您能在这里提供一些代码，那就更好了……什么样的代码？在谷歌地图api中创建圆圈？这很简单：
var overlay=new google.maps.Circle（{strokeColor:'#0000FF'，strokeOpacity:1，strokeWeight:3，fillOpacity:0，map:map，center:centerPoint，radius:50}）你在哪里出错，或者你尝试了多少，你可以在这里提供工作示例…我在第一个帖子中添加了代码示例，如果你可以在这里提供一些代码，效果会更好…什么样的代码？在谷歌地图api中创建圆圈？这很简单：
var overlay=new google.maps.Circle（{strokeColor:'#0000FF'，strokeOpacity:1，strokeWeight:3，fillOpacity:0，map:map，center:centerPoint，radius:50}）哪里出错，或者您尝试了多少，您可以在这里提供工作示例…我在first postNice idea中添加了代码示例，但不幸的是，主要问题是无法单击行..：（新想法：有1个圆。用户单击的任何地方，你都必须计算它是否是笔划的一部分。然后根据需要执行适当的事件。困难的部分将是计算出笔划区域中圆的哪些部分的几何图形。好主意，但不幸的是，主要问题是不可单击的线……：（新想法：有1个圆。用户点击的任何地方，你都必须计算它是否是笔划的一部分。然后根据需要进行适当的活动。最难的部分是计算出笔划区域中圆的哪些部分的几何图形。