谷歌地图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作为参数设置为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);
});

回答你的评论:你可以使用隐形标记创建一个技巧(只需将完全透明的图像作为标记图标),但我更喜欢使用圆形叠加的解决方案.