Question

我正在尝试在Google地图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);

有关详细信息，请参阅an example或reference docs。

Answer 2

比如说你已经绘制了一个收集拉丁数据的车辆路线折线，并希望在悬停时显示带有内容的showinfo窗口（比如它存在的时间戳） -

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

Infowindow在谷歌地图v3的折线上无法正常工作

2 个答案: