2014-01-11 20 views
7

Ich weiß, dass ich eine Markierung mit einem Tooltip machen kann, dass „etwas“ wie folgt zeigt:google map, show Tooltip auf einem Kreis

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

Ich möchte das gleiche mit einem Kreis zu tun, aber Titel doesn arbeite nicht.

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

Es druckt den Kreis, aber zeigt nicht die Meldung "ETWAS".

Wie kann ich es tun? Gibt es eine andere Eigenschaft, um es zu bekommen?

Vielen Dank im Voraus.

Antwort

23

Der Tooltipp wird über das systemeigene title -Attribut von DOM-Elementen erstellt, aber die API bietet keine Methode für den Zugriff auf das DOMEelement, das den Kreis enthält.

Eine mögliche Abhilfe den Titel-Attribut des map-div sein kann stattdessen zu verwenden (es onmouseover gesetzt und es onmouseout entfernen)

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

Das ist genial !!! Vielen Dank!!! :) – Himesh

+0

Das ist die erstaunliche Antwort. Danke :) – Sanket

3

Sie auch anstelle von HTML-Attribut title verwenden Infofenster können, wie die Der Titel darf nicht immer mit der Maus angezeigt werden. InfoWindow sieht ziemlich gut aus.

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

Dann gleichen Mouseover-Event-Mechanismus verwenden, um die Infofenster zu zeigen:

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(); 
}); 
+0

Sehen Sie sich auch https://github.com/atmist/snazzy-info-window#examples an –

1

Auch wir können Ereignis-Listener auf google.maps.Circle Instanz direkt hinzufügen.

Codebeispiel:

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

Gerade für alternative schrieb!