Google Map неверный маркер, получающий атрибут события - PullRequest
Новая
       35

Google Map неверный маркер, получающий атрибут события

2 голосов
/ 16 марта 2011

Я пытаюсь добавить прослушиватель событий для каждого маркера на карте Google, но по какой-то причине последний из маркеров является единственным, который получает прослушиватель.

Вот страница с картой, на которой возникла проблема: http://www.comehike.com/outdoors/parks/trailhead.php

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

Есть идеи, что может быть причиной этого?

Спасибо, Alex

Ответы [ 2 ]

6 голосов
/ 16 марта 2011

Вот демоверсия JSFiddle , которая похожа на карту Google вашего сайта, но вместо этого с ajax я просто поместил 3 "фиктивные" координаты Lat Lng. Дайте мне знать, если вам нужна дополнительная помощь с объяснением:

Причина в вашей функции обратного вызова. В вашей функции initializeTrailheads() вы создали локальную переменную с именем marker и прикрепили к ней событие нажатия. Затем вы присвоили маркеру информационное окно, которое делает infowindow.open(map, marker); google.map.event.addListener с функцией обратного вызова, которая находится в другой области действия после щелчка. Таким образом, он в основном захватывает переменную marker области видимости своего родителя, потому что он не имеет ее внутри себя. Обычно, когда не происходит событие щелчка, маркер становится последним инициализированным маркером (который является последним), и в основном привязывается к информационному окну, которое не связывается с какими-либо другими маркерами до него и, таким образом вызвать вашу проблему. Вам нужно просто заменить переменную marker на this, которая ссылается на маркер, по которому щелкают, и который должен решить вашу проблему: 

 google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, this);
 });

Это только с моей головы. Пожалуйста, дайте мне знать, если я не объяснил это ясно в некоторых частях.

1 голос
/ 16 марта 2011

Это очень распространенная проблема. Взгляните на этот пример кода, взятый из здесь 

var map;
var infoWindow;
var message = ['This', 'is', 'the', 'secret', 'message'];

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  infoWindow = new google.maps.InfoWindow();

  google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}

function addMarkers() {
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();

  function createMarker(map, position, number) {
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
      var myHtml = '<strong>#' + number + '</strong><br/>' + message[number - 1];
      infoWindow.setContent(myHtml);
      infoWindow.open(map, marker);
    });
  }

  for (var i = 1; i <= 5; i++) {
    var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
                                        southWest.lng() + lngSpan * Math.random());

    createMarker(map, latLng, i);
  }
}

Надеюсь, вы найдете это полезным

...