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);
});

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

Answer 2

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

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

谷歌地图v3将信息窗口添加到圆圈

2 个答案: