Hover over polygons (wyświetlanie tekstu)

Question

Zrobiłem kilka wielokątów na mapie Google. Teraz chcę dodać przesunięcie myszy (i myszą) do wielokątów, aby po najechaniu kursorem na wielokąt zobaczysz nazwę obszaru. a kiedy mouseOut nazwiska odchodzi (jak wtedy, gdy po najechaniu na guziki w Twojej przeglądarce)

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

jest to, co myślę, że będzie to wyglądać, ale nie wiem jak to działa.

Answer 1

Oto przykład: http://jsfiddle.net/tcfwH/304/

Nie dokładnie tak samo jak podpowiedzi przeglądarki, ale tekst może być stylizowany. Używam MarkerWithLabel. Każdy znacznik jest używany do nazwy swojego wielokąta. Aby przełączać skrzynki wieloliniowe zmień white-space: nowrap w CSS. Istnieje również InfoBox jako działająca opcja, ale uważam, że jest to o wiele bardziej skomplikowane niż MarkerWithLabel.

Detektory zdarzeń przenieść MarkerWithLabel wokół zależności od położenia myszy:

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

nie testowałem tego w różnych przeglądarkach, ale w Chrome to załatwia sprawę dla mnie: Call div zawierający mapa "map_canvas". Ponadto, aby każdy wielokąt miał własny tytuł, ustaw właściwość "nazwa_źródła" na tytuł wieloboku.

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