Info-bulle Google Maps v3

Question

Un objet marqueur google maps (google.maps.Marker) possède une propriété de titre. Lorsqu'un utilisateur passe sa souris sur le marqueur, une info-bulle s'affiche.

Il n'y a pas de propriété de titre sur une polyligne (google.maps.Polyline). Est-ce que je peux faire ceci/simuler ceci en V3? Je pourrais le faire en V2 , et je ne trouve pas d'exemple pour V3.

Answer 1

Si je suis je ne pense pas qu'il est pas trompé évt ible pour définir l'info-bulle car comme vous l'avez mentionné il n'y a pas de propriété title dans l'objet PolygonOptions.Mais vous pouvez faire un div qui ressemble exactement à l'info-bulle et placez-le disons dans le bout de votre souris pendant le mousemove événement. J'ai également essayé de trouver une solution pour placer cette info-bulle quelque part au centre du polygone mais je pense que c'est trop difficile, c'est pourquoi je pense aussi que les gars de google ne l'ont pas implémenté aussi. Vive

Answer 2

Je ne suis pas 100% c'est la seule façon, ou la meilleure façon, mais il est une façon de créer une fenêtre sur votre Polyligne

Dans Google Maps V3, vous devez créer un InfoWindow puis définir le contenu à l'aide myInfoWindow.setContent("Hello World!")

afin de faire afficher sur mouseover, vous aurez besoin de faire quelque chose comme:

 

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

Je trouve cette ligne qui m'a aidé à faire des infobulles sur les polygones, 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); 
    } 
}; 
}(); 

Aussi, S'il vous plaît voir cette SO discussion sur le même sujet: Tooltip over a Polygon in Google Maps Et, Google maps rectangle/polygon with title

Answer 4

J'ai combiné la réponse de @ samshull ci-dessus (dûment mise à jour!) Avec l'information de here pour faire apparaître le InfoWindow où le curseur de l'utilisateur mo utilise sur la ligne:

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

Ici, line est votre objet PolyLine; map est votre objet Map; et infoWindow est votre objet InfoWindow, que je viens de créer avec:

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

Je suis également this advice en réutilisant le même objet InfoWindow pour tous mes polylignes plutôt que de créer un nouveau pour chaque ligne:

Meilleures pratiques: Pour une meilleure expérience utilisateur, une seule fenêtre d'information doit être ouverte sur la carte à tout moment. Plusieurs fenêtres d'information font la carte apparaît encombrée. Si vous n'avez besoin que d'une seule fenêtre d'information à la fois, vous pouvez créer un seul objet InfoWindow et l'ouvrir à différents emplacements ou marqueurs lors d'événements de carte, tels que les clics de l'utilisateur. Si vous avez besoin de plus d'une fenêtre d'informations, vous pouvez afficher plusieurs objets InfoWindow en même temps.

Notez que infoWindow.setContent() prend une chaîne. Appelez donc toString() sur une variable numérique si vous souhaitez afficher un nombre dans l'InfoWindow.

-je voir tout cela comme une solution imparfaite jusqu'à ce que Google Maps Je espère qu'un jour ajouter une propriété title à PolylineOptions, tout comme ils l'ont déjà fait pour MarkerOptions.