google map show tooltip auf einem Kreis

Ich weiß, ich kann machen Sie eine Markierung mit einem tooltip zeigt, dass "ETWAS" wie diese:

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

Möchte ich das gleiche tun mit einem Kreis, aber Titel nicht funktioniert.

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 gibt den Kreis, aber nicht die Nachricht "ETWAS".

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

Vielen Dank im Voraus.

InformationsquelleAutor Andres | 2014-01-11
  1. 27

    Den tooltip erstellt wird über die native title-Attribut des DOM-elements, aber er API bietet keine Methode für den Zugriff auf das DOMElement enthält der Kreis.

    Ein möglicher workaround ist die Verwendung des title-Attribut des map-div statt(setzen Sie ihn onmouseover und entfernen Sie es 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');});
    • Dass die erstaunliche Antwort. Vielen Dank:)
    InformationsquelleAutor Dr.Molle
  2. 4

    Können Sie auch verwenden Infofenster anstelle von html-title-Attribut, wie es der Titel vielleicht nicht immer auf die Maus über. Infofenster sieht sehr gut aus.

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

    Dann verwenden Sie das gleiche mouseover-Ereignis-Mechanismus zu zeigen, der Infofenster:

    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();
});
    InformationsquelleAutor Jay Dubal
  3. 3

    Wir können auch fügen Sie Ereignis-listener direkt auf google.maps.Kreis-Instanz.

    Code-Beispiel:

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

    Schrieb für die alternative!

    InformationsquelleAutor Akmal
Schreibe einen Kommentar