Google maps v3 información sobre herramientas de polilínea

Question

Un objeto marcador de google maps (google.maps.Marker) tiene una propiedad de título, por lo que cuando un usuario mueve su mouse sobre el marcador, se muestra una información sobre herramientas simple.

No hay una propiedad de título en una polilínea (google.maps.Polyline). ¿Hay alguna manera de que pueda hacer esto/simular esto en V3? Podría hacer esto en V2 , y no puedo encontrar un ejemplo para V3.

Answer 1

Si no me equivoco no creo que es pos ible configurar la información sobre herramientas ya que como mencionaste no hay una propiedad de título en el objeto PolygonOptions. Pero puedes hacer un div que se ve exactamente igual a la información sobre herramientas y colocarlo digamos en la punta de tu mouse durante el mousemove evento. Traté también de encontrar una solución para colocar este tooltip en algún lugar en el centro del polígono, pero creo que es demasiado problema, por eso también creo que los chicos de Google no lo implementaron también. Saludos

Answer 2

no estoy 100% esta es la única forma, o la mejor manera, pero es una manera para crear una ventana por encima de su polilínea

en Google Maps V3, se debe crear un InfoWindow entonces establecer el contenido usando myInfoWindow.setContent("Hello World!")

con el fin de hacer que se muestre en mouseover, tendrá que hacer algo como:

 

google.maps.event.addListener(myPolyline, 'mouseover', function() { 
    myInfoWindow.open(mymap); 
    // mymap represents the map you created using google.maps.Map 
}); 

// assuming you want the InfoWindow to close on mouseout 
google.maps.event.addListener(myPolyline, 'mouseout', function() { 
    myInfoWindow.close(); 
}); 
 

Answer 3

Me pareció que esta línea que me ayudaba a hacer las sugerencias de los polígonos, de http://philmap.000space.com/gmap-api/poly-hov.html:

var tooltip=function(){ 
var id = 'tt'; 
var top = 3; 
var left = 3; 
var maxw = 200; 
var speed = 10; 
var timer = 20; 
var endalpha = 95; 
var alpha = 0; 
var tt,t,c,b,h; 
var ie = document.all ? true : false; 
return{ 
    show:function(v,w){   
     if(tt == null){    
      tt = document.createElement('div'); 
      tt.setAttribute('id',id); 
      t = document.createElement('div'); 
      t.setAttribute('id',id + 'top'); 
      c = document.createElement('div'); 
      c.setAttribute('id',id + 'cont'); 
      b = document.createElement('div'); 
      b.setAttribute('id',id + 'bot'); 
      tt.appendChild(t); 
      tt.appendChild(c); 
      tt.appendChild(b); 
      document.body.appendChild(tt);    
      tt.style.opacity = 0; 
      tt.style.filter = 'alpha(opacity=0)'; 
      document.onmousemove = this.pos;     
     } 
     tt.style.visibility = 'visible'; 
     tt.style.display = 'block'; 
     c.innerHTML = v; 
     tt.style.width = w ? w + 'px' : 'auto'; 
     if(!w && ie){ 
      t.style.display = 'none'; 
      b.style.display = 'none'; 
      tt.style.width = tt.offsetWidth; 
      t.style.display = 'block'; 
      b.style.display = 'block'; 
     } 
     if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'} 
     h = parseInt(tt.offsetHeight) + top; 
     clearInterval(tt.timer); 
     tt.timer = setInterval(function(){tooltip.fade(1)},timer); 
    }, 
    pos:function(e){ 
     var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; 
     var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; 
     tt.style.top = (u - h) + 'px'; 
     tt.style.left = (l + left) + 'px'; 
    }, 
    fade:function(d){ 
     var a = alpha; 
     if((a != endalpha && d == 1) || (a != 0 && d == -1)){ 
      var i = speed; 
      if(endalpha - a < speed && d == 1){ 
       i = endalpha - a; 
      }else if(alpha < speed && d == -1){ 
       i = a; 
      } 
      alpha = a + (i * d); 
      tt.style.opacity = alpha * .01; 
      tt.style.filter = 'alpha(opacity=' + alpha + ')'; 
     }else{ 
      clearInterval(tt.timer); 
      if(d == -1){tt.style.display = 'none'} 
     } 
    }, 
    hide:function(){ 
     clearInterval(tt.timer); 
     tt.timer = setInterval(function(){tooltip.fade(-1)},timer); 
    } 
}; 
}(); 

Además, consulta esta manera que la discusión sobre el mismo tema: Tooltip over a Polygon in Google Maps Y, Google maps rectangle/polygon with title

Answer 4

¡Combiné la respuesta de @ samshull anterior (debidamente votada!) Con información de here para que el InfoWindow aparezca donde el cursor del usuario utiliza sobre la línea:

// Open the InfoWindow on mouseover: 
google.maps.event.addListener(line, 'mouseover', function(e) { 
    infoWindow.setPosition(e.latLng); 
    infoWindow.setContent("You are at " + e.latLng); 
    infoWindow.open(map); 
}); 

// Close the InfoWindow on mouseout: 
google.maps.event.addListener(line, 'mouseout', function() { 
    infoWindow.close(); 
}); 

Aquí, line es su PolyLine objeto; map es su objeto Map; y infoWindow es su objeto ventana de información, que acabo de crear con:

var infoWindow = new google.maps.InfoWindow(); 

Yo también sigo this advice reutilizando el mismo objeto ventana de información para todos mis polilíneas en lugar de crear uno nuevo para cada línea:

Mejores prácticas: para la mejor experiencia de usuario, solo una ventana de información debe estar abierta en el mapa en cualquier momento. Varias ventanas de información hacen que el mapa aparezca desordenado. Si solo necesita una ventana de información a la vez, , puede crear solo un objeto InfoWindow y abrirlo en diferentes ubicaciones de o marcadores en los eventos del mapa, como los clics del usuario. Si lo hace necesita más de una ventana de información, puede visualizar múltiples objetos InfoWindow al mismo tiempo.

Tenga en cuenta que infoWindow.setContent() toma una cadena. Llame al toString() en una variable numérica si desea mostrar un número en InfoWindow.

que ver todo esto como una solución imperfecta hasta Google Maps espero que algún Day Agregar una propiedad title a PolylineOptions, al igual que ya han hecho por MarkerOptions.