google map, показать всплывающую подсказку по кругу

Я знаю, что могу сделать маркер с подсказкой, которая показывает" что-то", как это:

marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lon),
        map: map,
        draggable: true,
        title:"SOMETHING",
        icon: '/public/markers-map/male-2.png'
    });

Я хочу сделать то же самое с кругом, но заголовок не работает.

new google.maps.Circle({
                center: new google.maps.LatLng(lat,lon),
                radius: 20,
                strokeColor: "blue",
                strokeOpacity: 1,
                title:"SOMETHING",
                strokeWeight: 1,
                fillColor: "blue",
                fillOpacity: 1,
                map: map
            });

он печатает круг, но не показывает сообщение "что-то".

Как я могу это сделать? есть ли другое свойство, чтобы получить его?

спасибо заранее.

7
google-maps google-maps-api-3 tooltip

3 ответов

подсказка создается через native title-атрибут DOM-элементов, но он API не предоставляет никакого метода для доступа к DOMElement, который содержит круг.

возможным обходным путем может быть использование атрибута title-атрибута map-div вместо этого(установите его onmouseover и удалить его onmouseout)

        //circle is the google.maps.Circle-instance
        google.maps.event.addListener(circle,'mouseover',function(){
             this.getMap().getDiv().setAttribute('title',this.get('title'));});

        google.maps.event.addListener(circle,'mouseout',function(){
             this.getMap().getDiv().removeAttribute('title');});
24

вы также можете использовать InfoWindow вместо атрибута HTML title, так как заголовок может не отображаться всегда при наведении мыши. InfoWindow выглядит довольно хорошо.

var infowindow = new google.maps.InfoWindow({});
var marker = new google.maps.Marker({
    map: map
});

затем используйте тот же механизм событий mouseover, чтобы показать InfoWindow:

google.maps.event.addListener(circle, 'mouseover', function () {
 if (typeof this.title !== "undefined") {
    marker.setPosition(this.getCenter()); // get circle's center
    infowindow.setContent("<b>" + this.title + "</b>"); // set content
    infowindow.open(map, marker); // open at marker's location
    marker.setVisible(false); // hide the marker
   }
});

google.maps.event.addListener(circle, 'mouseout', function () {
 infowindow.close();
});
3

Также мы можем добавить прослушиватель событий непосредственно в google.карты.Экземпляр круг.

код:

//circle is the google.maps.Circle-instance
circle.addListener('mouseover',function(){
    this.getMap().getDiv().setAttribute('title',this.get('title'));
});

circle.addListener('mouseout',function(){
    this.getMap().getDiv().removeAttribute('title');
});

просто написал для альтернативных!

1