карты Google, показать подсказку по кругу

Question

Я знаю, что может сделать маркер с всплывающей подсказкой, которая показывает «НЕЧТО», как это:

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

Он печатает круг, но не показывает сообщение «ЧТО-ТО».

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

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

Answer 1

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

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

Answer 2

Вы также можете использовать InfoWindow вместо атрибута HTML заголовка, как название может не отображаться всегда на мыши. 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(); 
}); 

Answer 3

Также мы можем добавить прослушиватель событий непосредственно на экземпляр google.maps.Circle. Образец

Код:

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

Просто написал альтернативу!