InfoWindow в API Google Maps 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 (), то функция не 't работа.

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

Если я не ошибаюсь, что ваши массивы выходят за рамки видимости при наведении мыши, установите 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

этот слушатель

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

запускает эту функцию при возникновении события. Таким образом, вы нажимаете на маркер, и API запускает функцию и пытается открыть infoWindow[i] на marker[i]. Во время выполнения либо i находится вне области действия, либо это последнее значение цикла.

Правильный способ последовательного связывания infoWindows с маркерами состоит в том, чтобы использовать вспомогательную функцию - которая обычно называется createMarker() - как продемонстрировано в порте Ларри кода Майка Уильямса.

Answer 4

Не совсем уверен, что вы пытаетесь сделать. Вам действительно нужно настроить только одно информационное окно и динамически загружать контент при наведении курсора.

Вам нужно использовать только один маркер и каждый раз устанавливать слушателя.

Возможно, вы захотите попробовать следующее, но я не совсем уверен, что вы пытаетесь сделать со своим кодом.

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

Эта ссылка может быть полезна.