Google地圖v3折線上的Infowindow無法正常工作

Question

我試圖在帶有Google Maps v3中相關信息窗口的地圖上畫一條線。 我的鼠標懸停似乎在工作，但似乎無法打開信息窗口。

function drawScheduledCommand(radius, map, latlng, angle, infoText){
  var spherical  = google.maps.geometry.spherical;
  twoThirdRadius = radius / 3 * 2 ;
  oneThirdRadius = radius / 3 ;
  twoThirdPoint  = new spherical.computeOffset(center, twoThirdRadius, angle);
  endPoint       = new spherical.computeOffset(twoThirdPoint, oneThirdRadius, angle);

  var positionLineOptions = {
    strokeColor: "#FFFFF0",
    strokeOpacity: 0.99,
    strokeWeight: 2,
    fillColor: "#FFFFF0",
    fillOpacity: 0.99,
    map: map,
    zIndex: 5,
    path: [twoThirdPoint, endPoint]
  }
  line = new google.maps.Polyline(positionLineOptions);

  var lineInfoWindow = new google.maps.InfoWindow();
  lineInfoWindow.setContent(infoText);
  lineInfoWindow.open(map);

  google.maps.event.addListener(line, 'mouseover', function() {
     console.log(infoText);
     lineInfoWindow.open(map);
  });

  google.maps.event.addListener(line, 'mouseout', function() {
     lineInfoWindow.close();

  });
}

Answer 1

對於其他遇到此問題的人：使用setPosition() （就像您所做的那樣），或者可以通過將MVCObject傳遞給open()調用來設置位置，如下所示：

infowindow.open(map,marker);

有關詳細信息，請參見示例或參考文檔 。

Answer 2

舉例來說，假設您繪制了一條收集經緯度數據的車輛路線折線，並希望在懸停時顯示包含內容的信息窗口（比如說在那里存在的時間戳）

var rawData = [{ll: [18.9750, 72.8258], t: 1476416370},  .......];
// data is lets say array of lat longs and t
var data, polylineCoordinates; 
var infoWindow = new google.maps.InfoWindow();

angular.forEach(rawData, function(item) {
  var latlng = new google.maps.LatLng(item.ll[0], item.ll[1]);
  data.push([latlng, item.t]);
});
// polylineCoordinates is array of LatLng objects
angular.forEach(data, function(item) {
  polylineCoordinates.push(item[0]);
});

var polyline = new google.maps.Polyline({
          path: polylineCoordinates,
          strokeColor: "#0000ff",
          strokeOpacity: 2,
          strokeWeight: 4,
          geodesic: true
        });
polyline.setMap(map);
google.maps.event.addListener(polyline, 'mouseover', function(e) {
  // closes previous info window when mouse moves over polyline
  if(infoWindow.getMap()) { infoWindow.close(); }
  var t;
  angular.forEach(data, function(ping) {
  // accurate to 110 m when coordinates have 3 decimal places precision
  // extracting timestamp for a lat lon coordinate

  if(ping[0].lat().toFixed(3) == e.latLng.lat().toFixed(3) && ping[0].lng().toFixed(3) == e.latLng.lng().toFixed(3)) {
    t = moment(new Date(ping[1] * 1000)).format('Do MMM LT');
    infoWindow.setPosition(e.latLng);
    infoWindow.setContent('<b>' + t + '</b>');
    infoWindow.open(map);
   };
  });
 });