谷歌地圖v3的折線工具提示

Question

谷歌地圖標記對象（google.maps.Marker）具有標題屬性，因此當用戶在標記移動他們的鼠標顯示一個簡單的工具提示。

沒有對摺線（google.maps.Polyline）的目標性質。有沒有一種方法可以做到這一點/在V3模擬此？ 我可以在V2 中做到這一點，我找不到V3的例子。

Answer 1

如果我沒有記錯，我不認爲這是POSS IBLE設置提示，因爲正如你提到的有沒有的PolygonOptions標題屬性object.But可以讓一個div，看起來完全一樣的提示，並把它讓我們在你的鼠標尖端的鼠標移動過程中說出事件。我還試圖找到一個解決方案，把這個工具提示放置在多邊形的中心，但我認爲這太麻煩了，所以我也認爲谷歌的人也沒有實現它。 乾杯

Answer 2

我不是100％，這是唯一的辦法，還是最好的方式，但它是在你的折線來創建一個窗口方式

在谷歌地圖V3，你應該創建一個InfoWindow然後設置使用myInfoWindow.setContent("Hello World!")

爲了使其顯示在鼠標懸停的內容，你需要做這樣的事情：

 

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

我發現這個網上說幫我做的多邊形工具提示， 從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); 
    } 
}; 
}(); 

另外，請查看關於同一主題的本SO討論： Tooltip over a Polygon in Google Maps 而且， Google maps rectangle/polygon with title

Answer 4

我結合@ samshull的回答以上（正式upvoted！）從here信息，使InfoWindow出現在用戶的光標莫使用過線：

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

這裏，line是你PolyLine對象; map是你的Map對象;和infoWindow是你的信息窗口對象，我只是創建：

：

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

我也爲我所有的折線相同的信息窗口對象重新使用而不是爲每行一個新的後續this advice

最佳實踐：爲了獲得最佳的用戶體驗，只有一個信息窗口 應地圖在任何一個時間上的開放。多個信息窗口使 地圖顯得雜亂無章。如果你只需要一個信息窗口的時間， 你可以只創建一個信息窗口對象，並在地圖時的事件，如用戶點擊不同 位置或標記打開它。如果你需要多個信息窗口，你可以同時顯示多個InfoWindow對象。

注意infoWindow.setContent()需要一個字符串。因此，如果您想在InfoWindow中顯示一個數字，請在數字變量上撥打toString()。

我認爲所有這一切都爲一個不完美的解決辦法，直到谷歌地圖希望有一天一個title屬性添加到PolylineOptions，就像他們已經爲MarkerOptions完成。