InfoWindow在api谷歌地图javascript v3

Question

有这样的功能。 它有效，没问题。

function setIconsOnMap(arrIcons, pathIcon){
  var arrLatLng=Array();
  var markers=Array();
  var infowindow=Array();
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i]=new google.maps.LatLng(arrIcons[i]['geo lat'],
      arrIcons[i]['geo lon']);
  }
  for (i=0; i<arrLatLng.length; i++){
    markers[i]=new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers[i].setIcon(pathIcon);
    infowindow[i]=new google.maps.InfoWindow({
      content: 'uuuu'
    });
    google.maps.event.addListener(markers[i], 'mouseover', function(){      
      alert('sss');
    });
  }
}

http://clip2net.com/s/1FtrV

http://clip2net.com/s/1Ftrp

但是，如果我尝试显示InfoWindow而不是alert（），那么该函数不起作用。

function setIconsOnMap(arrIcons, pathIcon){
  var arrLatLng=Array();
  var markers=Array();
  var infowindow=Array();
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i]=new google.maps.LatLng(arrIcons[i]['geo lat'],
      arrIcons[i]['geo lon']);
  }
  for (i=0; i<arrLatLng.length; i++){
    markers[i]=new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers[i].setIcon(pathIcon);
    infowindow[i]=new google.maps.InfoWindow({
      content: 'uuuu'
    });
    google.maps.event.addListener(markers[i], 'mouseover', function(){      
      infowindow[i].open(map, markers[i]);
    });
  }
}

请给我一个提示我错误的地方。

Answer 1

如果我没有弄错，当触发mouseover事件时你的数组超出范围，将infowindow设置为标记属性，你应该没问题（同样应该全局声明数组以供进一步参考）

var arrLatLng=Array();
var markers=Array();
function setIconsOnMap(arrIcons, pathIcon){
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i]=new google.maps.LatLng(arrIcons[i]['geo lat'],
      arrIcons[i]['geo lon']);
  }
  for (i=0; i<arrLatLng.length; i++){
    markers[i]=new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers[i].setIcon(pathIcon);
    markers[i].infoWindow=new google.maps.InfoWindow({
      content: 'uuuu'
    });
    google.maps.event.addListener(markers[i], 'mouseover', function(){      
      this.infoWindow.open(map, this);
    });
  }
}

Answer 2

function setIconsOnMap(arrIcons, pathIcon){
  var arrLatLng=Array();
  var markersArray = Array();
  var infowindowArray = Array();
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i] = new google.maps.LatLng(arrIcons[i]['geo lat'],
    arrIcons[i]['geo lon']);

    markers = new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers.setIcon(pathIcon);
    markersArray[i] = markers;
    infowindow = new google.maps.InfoWindow({
      content: 'uuuu'
    });

    google.maps.event.addListener(markers , 'mouseover', function(){      
      infowindow.open(map, markers);
    });
    infowindowArray[i] = infowindow;
  }
}

试试这段代码。 它会工作。

Answer 3

不完全确定你想要做什么。 您只需要设置一个infowindow并在鼠标悬停时动态加载内容。

您只需要使用一个标记并每次都设置监听器。

您可能想尝试以下操作，但我不完全确定您要对代码执行的操作。

google.maps.event.addListener(markers[i], 'mouseover', (function(event, index){   
  return function(){
   infowindow.content = infowindowArray[index];
   infowindow.open(map,this);
  }
});

此链接可能会有所帮助。

Answer 4

这个听众

google.maps.event.addListener(markers[i], 'mouseover', function(){      
      infowindow[i].open(map, markers[i]);
    });

在事件发生时运行该功能。 所以你点击一个标记，API运行该函数并尝试在marker[i]上打开infoWindow[i] marker[i] 。 在运行时， i超出范围，或者它是循环的最后一个值。

将infoWindows与标记连接起来的正确方法是使用辅助函数 - 通常称为createMarker() - 如Larry的Mike Williams代码端口所示 。