Получение идентичного идентификатора маркера Карт Google при нажатии - PullRequest
Новая
       15

Получение идентичного идентификатора маркера Карт Google при нажатии

0 голосов
/ 10 июня 2019

Я пытаюсь получить идентификатор / индекс отдельных маркеров на карте Google, когда я нажимаю на них.

На данный момент я получаю только тот, который id: 4

Вот это JSFIDDLE

Вот где я устанавливаю маркеры: 

function setMarkers(locations) {

    var bounds  = new google.maps.LatLngBounds();

    for (var i = 0; i < locations.length; i++) {
        var loc = locations[i];
        var currentLatLong = new google.maps.LatLng(loc[1], loc[2]);
        var marker = new google.maps.Marker({
            position: currentLatLong,
            map: map,
            index: i,
            animation: google.maps.Animation.DROP,
            title: loc[0],
            zIndex: loc[3]
        });

        marker.addListener('click', function(e, i) {
            var info = marker.index;
            document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
        });

        bounds.extend(currentLatLong);

        // Push marker to markers array
        markers.push(marker);
    }

    map.fitBounds(bounds);      
    map.panToBounds(bounds);    
}

Как тиражировать:

1) Нажмите кнопку поиска слева от экрана

2) Нажмите маркер, а затем другой.

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

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

1 Ответ

1 голос
/ 11 июня 2019

Внутри функции прослушивания событий "click" this относится к нажатому маркеру, поэтому измените: 

marker.addListener('click', function(e, i) {
    var info = marker.index;
    document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
});

Кому: 

marker.addListener('click', function(e, i) {
    var info = this.index;
    document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
});

подтверждение концепции скрипки

(другой вариант - получить закрытие функции для переменной marker, но это увеличит накладные расходы)

screenshot of resulting map

фрагмент кода: 

var map;
var markers = [];
var initialEmptyMarkers = [];
var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var infowindow = new google.maps.InfoWindow({
  content: "Content"
});

function setMarkers(locations) {

  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < locations.length; i++) {
    var loc = locations[i];
    var currentLatLong = new google.maps.LatLng(loc[1], loc[2]);
    var marker = new google.maps.Marker({
      position: currentLatLong,
      map: map,
      index: i,
      animation: google.maps.Animation.DROP,
      title: loc[0],
      zIndex: loc[3]
    });

    bounds.extend(currentLatLong);

    marker.addListener('click', function(e, i) {
      var info = this.index;
      document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
    });

    // Push marker to markers array
    markers.push(marker);
  }

  map.fitBounds(bounds);
  map.panToBounds(bounds);
}

function reloadMarkers() {

  // Loop through markers and set map to null for each
  for (var i = 0; i < markers.length; i++) {

    markers[i].setMap(null);
  }

  // Reset the markers array
  markers = [];

  // Call set markers to re-add markers
  setMarkers(locations);
}

function initMap() {

  var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(10, 12),
    mapTypeId: google.maps.MapTypeId.MAP
  }

  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Bind event listener on button to reload markers
  document.getElementById('searchButton').addEventListener('click', reloadMarkers);
}

initMap();
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#search {
  position: absolute;
  top: 150px;
  left: 10px;
  background-color: #fff;
  z-index: 999;
  padding: 20px;
}

#map {
  height: 100%;
  z-index: 1;
}

#markerInfo {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  background-color: #fff;
  padding: 10px;
  z-index: 999;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<div id="map"></div>
<div id="search">
  <input type="button" value="Search" id="searchButton">
</div>
<div id="markerInfo"></div>
...