Google maps v3 добавляет информационное окно в круг

Есть ли способ добавить 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);
});

или, альтернативно, существует способ создания невидимого маркера в центре круга, на который можно щелкнуть, чтобы получить доступ к инфо-окну

Ответы

Ответ 1

у вас может быть информационное окно для вашего круга. Но вы должны слегка настроить свой код.

Во-первых, необходимо установить clickable=true для вашего обложки Circle (иначе клики события на круге не обрабатываются).

Затем вам нужно изменить код прослушивателя кликов. Помещение круга в качестве параметра функции open() не имеет эффекта (круг не является надлежащим видом 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);
});

Ответить на комментарий: Вы можете создать трюк с невидимым маркером (просто поместите полностью прозрачное изображение в качестве значка маркера), но я бы предпочел решение с наложением круга.

Ответ 2

чтобы установить информационное окно, где щелкнул мышью

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