Desplácese sobre polígonos (mostrando texto)

Question

Hice algunos polígonos en un mapa de Google. Ahora quiero agregar un mouseover (y mouseout) a los polígonos, de modo que cuando pasas el cursor sobre el polígono, puedas ver el nombre del área. y cuando mouseOut los nombres desaparece (como cuando se pasa sobre los botones en su navegador)

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

Esto es lo que creo que se vería así, pero no sé cómo funciona.

Answer 1

He aquí un ejemplo: http://jsfiddle.net/tcfwH/304/

No

exactamente la misma que la información de herramientas del navegador, pero el texto puede ser de estilo. Estoy usando MarkerWithLabel. Cada marcador se usa para el nombre de su polígono. Para alternar cuadros de varias líneas, cambie white-space: nowrap en CSS. También hay InfoBox como una opción de trabajo, pero me resulta mucho más complicado de usar que MarkerWithLabel.

Los detectores de eventos se mueven alrededor de la MarkerWithLabel de acuerdo con la posición del ratón:

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

No he probado esto en una variedad de navegadores, pero en Chrome que hace el truco para mí: Llame a la div que contiene el mapa "map_canvas". Además, para que cada polígono tenga su propio título, establezca la propiedad 'sourceName' en el título del polígono.

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