Über Polygonen schweben (Text wird angezeigt)

Question

Ich habe ein paar Polygone auf einer Google-Karte erstellt. Jetzt möchte ich den Polygonen einen Mouseover (und Mouseout) hinzufügen, so dass Sie, wenn Sie den Mauszeiger über das Polygon bewegen, den Namen des Bereichs sehen können. und wenn Sie die Namen mouseOut geht weg (wie wenn Sie den Mauszeiger über Schaltflächen in Ihrem Browser)

var map; 
var infoWindow; 

function initialize() { 
    var myLatLng = new google.maps.LatLng(50.88111111111, 3.889444444444); 
    var myOptions = { 
     zoom: 12, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    var poly; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var polyCoords = [ 
     verwissel(3.869506,50.906449), 
     verwissel(3.869654,50.905664), 
     verwissel(3.869934,50.904131), 
     verwissel(3.870310,50.902717), 
     verwissel(3.870471,50.901559), 
    ]; 

    poly = new google.maps.Polygon({ 
     paths: HerzeleCoords, 
     strokeColor: "#FF0000", 
     strokeOpacity: 0.8, 
     strokeWeight: 3, 
     fillColor: "#FF0000", 
     fillOpacity: 0.35 
    }); 

    google.maps.event.addListener(Poly, "mouseover", function(showtext("polyname")); 
google.maps.event.addListener(Poly, "mouseover", function(do not show text anymore); 

Dies ist, was ich denke, es würde so aussehen, aber ich weiß nicht, wie es funktioniert.

Answer 1

Hier ist ein Beispiel: http://jsfiddle.net/tcfwH/304/

nicht genau das gleiche wie ein Browser Tooltip, aber der Text gestaltet werden kann. Ich benutze MarkerWithLabel. Jeder Marker wird für den Namen seines Polygons verwendet. Um mehrzeilige Boxen umzuschalten, ändern Sie im CSS white-space: nowrap. Es gibt auch InfoBox als eine Arbeitsoption, aber ich finde es viel komplizierter zu verwenden als MarkerWithLabel.

Die Veranstaltung Zuhörer bewegen, um die MarkerWithLabel um entsprechend der Position der Maus:

google.maps.event.addListener(poly, "mousemove", function(event) { 
    marker.setPosition(event.latLng); 
    marker.setVisible(true); 
    }); 
    google.maps.event.addListener(poly, "mouseout", function(event) { 
    marker.setVisible(false); 
    }); 

Answer 2

Ich habe dies in einer Vielzahl von Browsern nicht getestet, aber in Chrome macht es den Trick für mich: die div Rufen Sie enthält die Karte "map_canvas". Damit jedes Polygon seinen eigenen Titel hat, legen Sie die Eigenschaft 'sourceName' auf den Titel des Polygons fest.

 \t perimeter.addListener('mouseover',function(){ 
 
      var map_canvas = document.getElementById("map_canvas"); 
 
      map_canvas.title = this.sourceName; 
 
     }); 
 
    \t perimeter.addListener('mouseout',function(){ 
 
      var map_canvas = document.getElementById("map_canvas"); 
 
      map_canvas.removeAttribute('title'); 
 
     });