Google maps v3 polilinea tooltip

Question

Un oggetto indicatore google maps (google.maps.Marker) ha una proprietà title, quindi quando un utente sposta il mouse sopra l'indicatore viene visualizzato un semplice suggerimento.

Non esiste una proprietà del titolo su una polilinea (google.maps.Polyline). C'è un modo per farlo/simulare questo in V3? Potrei farlo in V2 e non riesco a trovare un esempio per V3.

Answer 1

Se non mi sbaglio non credo è poss è possibile impostare la descrizione del comando poiché come hai accennato non esiste una proprietà title nell'oggetto PolygonOptions.Ma puoi creare un div che sembra esattamente lo stesso del tooltip e posizionarlo diciamo nella punta del tuo mouse durante il mousemove evento. Ho provato anche a trovare una soluzione per posizionare questo suggerimento da qualche parte nel centro del poligono, ma penso che sia troppo difficile, ecco perché penso anche che i ragazzi di Google non l'abbiano implementato anche. Acclamazioni

Answer 2

io non sono al 100% questo è l'unico modo, o il modo migliore, ma è un modo per creare una finestra sopra la Polilinea

In Google Maps V3, si dovrebbe creare un InfoWindow poi impostare il contenuto utilizzando myInfoWindow.setContent("Hello World!")

al fine di rendere più mostrare al passaggio del mouse, è necessario fare qualcosa di simile:

 

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

ho trovato questo online che mi ha aiutato a fare i suggerimenti su poligoni, da 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); 
    } 
}; 
}(); 

Inoltre, consulta questo SO discussione sullo stesso argomento: Tooltip over a Polygon in Google Maps E, Google maps rectangle/polygon with title

Answer 4

Ho combinato la risposta di @ samshull sopra (debitamente upvoted!) Con informazioni da here per far apparire il InfoWindow dove si trova il cursore dell'utente utilizza oltre la linea:

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

Qui, line è il vostro PolyLine oggetto; map è l'oggetto Map; e infoWindow è l'oggetto InfoWindow, che ho appena creato con:

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

anche io seguo this advice riutilizzando lo stesso oggetto InfoWindow per tutti i miei polilinee piuttosto che crearne uno nuovo per ogni linea:

Best practice: per la migliore esperienza utente, solo una finestra informativa deve essere aperta sulla mappa in qualsiasi momento. Più finestre info fanno la mappa appare ingombra. Se hai solo bisogno di una finestra informativa alla volta, puoi creare un solo oggetto InfoWindow e aprirlo in diverse posizioni o indicatori su eventi di mappe, come i clic dell'utente. Se si utilizza per più di una finestra informativa, è possibile visualizzare più oggetti InfoWindow allo stesso tempo.

Si noti che infoWindow.setContent() prende una stringa. Quindi chiamare toString() su una variabile numerica se si desidera visualizzare un numero in InfoWindow.

ho vista tutto questo come una soluzione imperfetta finché Google Maps Speriamo che un giorno aggiungere un alloggio title a PolylineOptions, proprio come hanno già fatto per MarkerOptions.