谷歌地图 v3 在圆圈中添加信息窗口

Question

有没有办法将 infoWindow 添加到 google.maps.Circle 创建的圆圈

类似这样的事情

var circ = new google.maps.Circle({
            center:latlng,
            clickable:false,
            fillColor:colors[count],
            fillOpacity:0.3, 
            map:map,
            radius:radius,
            strokeColor:colors[count],
            strokeOpacity:0.3});

和

//create info window
var infoWindow= new google.maps.InfoWindow({
    content: "Your info here"
    });

//add a click event to the circle
google.maps.event.addListener(circ, 'click', function(){
//call  the infoWindow
infoWindow.open(map, circ);
}); 

或者有没有办法在圆的中心创建一个不可见的标记，可以单击该标记来访问信息窗口

Answer 1

您可以为您的圆圈叠加层提供信息窗口。但你必须稍微调整你的代码。

首先，需要为您的圆圈叠加设置

clickable=true

（否则不会处理圆圈上的点击事件）。

然后你必须更改点击监听器的代码。将 Circle 作为函数 open() 的参数没有任何效果（Circle 不是正确的 MVCObject 类型，有关解释，请阅读 InfoWindow.open() 函数的文档）。要显示信息窗口，您必须提供其位置 - 例如点击事件的位置，圆心，......

代码就是这样

google.maps.event.addListener(circ, 'click', function(ev){
    infoWindow.setPosition(ev.latLng);
    infoWindow.open(map);
});

或

google.maps.event.addListener(circ, 'click', function(ev){
    infoWindow.setPosition(circ.getCenter());
    infoWindow.open(map);
});

回复您的评论： 您可以使用不可见的标记创建一个技巧（只需将完全透明的图像作为标记图标），但我更喜欢使用圆形覆盖的解决方案。

Answer 2

在鼠标单击的位置设置信息窗口

google.maps.event.addListener(circ, 'click', function(ev){
    infoWindow.setPosition(ev.latLng); //<-- ev matches what you put ^ (mouse event)
    infoWindow.open(map);
});

Answer 3

我也有同样的困惑。我简单地使用解决了它 { const 圆 = new google.maps.Circle({ 描边颜色：“#FFFF00”， 描边不透明度：0.8， 笔画权重：1， 填充颜色：“#FFFF00”， 填充不透明度：0.4， 中心：位置，// { 纬度：46.021667，经度：11.124717 } 半径：距离， 地图： 地图，

    });

    const info = "Radius: " + circle.getRadius() + "m";
    const iw = new google.maps.InfoWindow({
        content: info,
        position: position,
    });
    circle.addListener("mouseover", () => {
        iw.open({
            map,
        });
    });
    circle.addListener("mouseout", () => {
        iw.close();
    });
    circle.addListener("click", () => {
        circle.setMap(null);
    });

}