Google map v3 polyline tooltip

Question

Đối tượng điểm đánh dấu bản đồ google (google.maps.Marker) có thuộc tính tiêu đề, do đó khi người dùng di chuột qua điểm đánh dấu, chú giải công cụ đơn giản sẽ được hiển thị.

Không có thuộc tính tiêu đề trên polyline (google.maps.Polyline). Có cách nào tôi có thể làm điều này/mô phỏng này trong V3? Tôi có thể làm điều này trong V2 và tôi không thể tìm thấy ví dụ cho V3.

Answer 1

Nếu tôi không nhầm tôi không nghĩ rằng đó là poss ible để thiết lập các tooltip kể từ khi bạn đề cập không có một tài sản tiêu đề trong PolygonOptions đối tượng.But bạn có thể làm cho một div trông giống hệt như tooltip và đặt nó ở đầu con chuột của bạn trong mousemove sự kiện. Tôi cũng đã cố gắng tìm một giải pháp để đặt chú giải này ở đâu đó ở trung tâm của đa giác nhưng tôi nghĩ rằng đó là quá nhiều của một rắc rối đó là lý do tại sao tôi cũng nghĩ rằng những kẻ google đã không thực hiện nó cũng. Cheers

Answer 2

Tôi không chắc chắn 100% đây là cách duy nhất, hoặc cách tốt nhất, nhưng nó là một cách để tạo ra một cửa sổ trên Polyline bạn

trong Google Maps V3, bạn nên tạo một InfoWindow sau đó thiết lập các nội dung sử dụng myInfoWindow.setContent("Hello World!")

để làm cho nó hiển thị khi rê chuột, bạn sẽ cần phải làm một cái gì đó như:

 

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

Tôi tìm thấy trực tuyến này đã giúp tôi làm tooltips trên đa giác, từ 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); 
    } 
}; 
}(); 

Ngoài ra, Vui lòng xem SO thảo luận về cùng một chủ đề: Tooltip over a Polygon in Google Maps Và, Google maps rectangle/polygon with title

Answer 4

Tôi đã kết hợp câu trả lời của @ samshull ở trên (được cập nhật hợp lệ!) Với thông tin từ here để làm cho số InfoWindow xuất hiện nơi con trỏ của người dùng mo sử dụng trên dòng:

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

Ở đây, line là đối tượng PolyLine của bạn; map là đối tượng Map của bạn; và infoWindow là đối tượng InfoWindow của bạn, mà tôi chỉ cần tạo với:

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

Tôi cũng làm theo this advice bằng cách tái sử dụng các đối tượng InfoWindow tương tự cho tất cả các polylines của tôi chứ không phải là tạo ra một cái mới cho mỗi dòng:

Thực tiễn tốt nhất: Để có trải nghiệm người dùng tốt nhất, chỉ một cửa sổ thông tin sẽ mở trên bản đồ cùng một lúc. Nhiều cửa sổ thông tin tạo ra bản đồ xuất hiện lộn xộn. Nếu bạn chỉ cần một cửa sổ thông tin tại một thời điểm, bạn có thể tạo chỉ một đối tượng InfoWindow và mở nó tại các địa điểm khác nhau khi các sự kiện trên bản đồ, chẳng hạn như nhấp chuột của người dùng. Nếu bạn thực hiện cần nhiều cửa sổ thông tin, bạn có thể hiển thị nhiều đối tượng InfoWindow cùng một lúc.

Lưu ý rằng infoWindow.setContent() mất một chuỗi. Vì vậy, hãy gọi toString() trên một biến số nếu bạn muốn hiển thị một số trong InfoWindow.

Tôi xem tất cả điều này là giải pháp không hoàn hảo cho đến khi Google Maps hy vọng một ngày sẽ thêm thuộc tính title vào PolylineOptions, giống như họ đã làm cho MarkerOptions.