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

Есть ли способ добавить информационное окно в круг, созданный 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);
});

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


google-maps-api-3 infowindow
person trs    schedule 05.07.2011    source источник
comment
или, в качестве альтернативы, есть способ создать невидимый маркер в центре круга, по которому можно щелкнуть, чтобы получить доступ к информационному окну   -  person trs    schedule 05.07.2011

Ответы (2)


arrow_upward
44
arrow_downward

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

Во-первых, необходимо установить clickable=true для оверлея «Круг» (иначе события щелчка по кругу не будут обрабатываться).

Затем вам нужно изменить код прослушивателя кликов. Включение круга в качестве параметра функции open () не имеет никакого эффекта (круг не является подходящим типом MVCObject, для объяснения прочтите документацию по InfoWindow .open () function). Чтобы отобразить информационное окно, вы должны указать его положение - например, положение события щелчка, центр круга, ....

Код тогда

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

or

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

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

person Tomik    schedule 05.07.2011
comment
что представляет собой ev? и есть ли способ сделать индикатор, чтобы пользователь мог щелкнуть круг, как вариант заголовка в маркере - person trs; 05.07.2011
comment
ev - это MouseEvent (code.google.com/apis/maps/ документация / javascript /). Круговое наложение не имеет текстового индикатора. Но если для кликабельности установлено значение true, курсор меняется, когда он располагается над кругом. Создать текстовый индикатор не так просто - я бы сделал это с пользовательским оверлеем и слушателем событий наведения курсора мыши. - person Tomik; 05.07.2011
comment
Я пробовал этот метод, но он не сработал. Я получаю событие щелчка, но не могу открыть информационное окно! у вас есть еще какой-нибудь намек? - person Future2020; 13.04.2012
comment
Просто чтобы сказать, что если вы генерируете круги в цикле, то вместо infoWindow.setPosition (circ.getCenter ()); вы должны использовать infoWindow.setPosition (this.getCenter ()) ;. В противном случае информационное окно всегда будет появляться рядом с последним кружком в цикле. - person Richard Williams; 24.04.2014
comment
его работает только на последнем латинском языке круга для меня. У меня есть массив латинского языка и создается несколько кругов. как я могу определить содержимое каждого круга? - person zira; 01.09.2015
comment
обновление: я нашел решение в stackoverflow.com/questions/16538075/. знак равно - person zira; 02.09.2015

arrow_upward
2
arrow_downward

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

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