google-maps-api-3 - 谷歌地图 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);
}); 

或者有一种方法可以在圆的中心创建一个不可见的标记，可以点击它来访问 infoWindow

Answer 1

你可以有你的圈子覆盖信息窗口。但是你必须稍微调整你的代码。

首先需要设置clickable=true用于您的 Circle 叠加层(否则不会处理圆圈上的点击事件)。

然后你必须改变点击监听器的代码。将 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);
});

回复您的评论:
您可以使用不可见的标记创建技巧(只需将完全透明的图像作为标记图标)，但我更喜欢使用圆形叠加的解决方案。