Динамический прослушиватель в JavaScript API Карт Google

у меня есть исходный файл JSON и код javascript. Я хочу динамически загружать маркеры из JSON. Для каждого маркера есть один contentString, который должен отображаться после щелчка по маркеру. Но проблема в том, что после нажатия на первый маркер отображается информация о маркере два. Есть ли решение и какое лучшее?

JSON:

[  
   {  
      "Nazev":"Pobocka 1",
      "Mesto":"Praha",
      "Ulice":"Nejvetsi 35\/352",
      "PSC":"12345",
      "Web":"www.praha.cz",
      "Lat":"50.0596696",
      "Long":"14.4656239"
   },
   {  
      "Nazev":"Pobocka 2",
      "Mesto":"Brno",
      "Ulice":"Nejmensi 384\/64",
      "PSC":"54321",
      "Web":"www.brno.cz",
      "Lat":"49.2020701",
      "Long":"16.5779606"
   }
]

Источник Javascript:

<script>
function initialize() {
  var json = getdata();
  var center = new google.maps.LatLng(49.9789391,15.6342143);
  var mapOptions = {
    zoom: 8,
    center: center
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for( i = 0; i < json.length; i++) {
            var Nazev =  json[i].Nazev;
            var Mesto =  json[i].Mesto;
            var Ulice =  json[i].Ulice;
            var PSC   =  json[i].PSC;
            var Web   =  json[i].Web;
            var Lat   =  json[i].Lat;
            var Long  =  json[i].Long;
            var contentString = "<b>"+Nazev+"</b><br>"+Mesto+"<br>"+Ulice+"<br>"+PSC+"<br><a href='http://"+Web+"'>"+Web+"</a>";
            var latLng = new google.maps.LatLng(Lat,Long);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });


        }

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

google-maps javascript google-maps-markers
person Bullman    schedule 23.05.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это дубликат Google Maps JS API v3 - Simple Multiple Marker Пример

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

function initialize() {
  var json = [{
    "Nazev": "Pobocka 1",
    "Mesto": "Praha",
    "Ulice": "Nejvetsi 35\/352",
    "PSC": "12345",
    "Web": "www.praha.cz",
    "Lat": "50.0596696",
    "Long": "14.4656239"
  }, {
    "Nazev": "Pobocka 2",
    "Mesto": "Brno",
    "Ulice": "Nejmensi 384\/64",
    "PSC": "54321",
    "Web": "www.brno.cz",
    "Lat": "49.2020701",
    "Long": "16.5779606"
  }];
  var center = new google.maps.LatLng(49.9789391, 15.6342143);
  var mapOptions = {
    zoom: 8,
    center: center
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < json.length; i++) {
    var Nazev = json[i].Nazev;
    var Mesto = json[i].Mesto;
    var Ulice = json[i].Ulice;
    var PSC = json[i].PSC;
    var Web = json[i].Web;
    var Lat = json[i].Lat;
    var Long = json[i].Long;
    var contentString = "<b>" + Nazev + "</b><br>" + Mesto + "<br>" + Ulice + "<br>" + PSC + "<br><a href='http://" + Web + "'>" + Web + "</a>";
    var latLng = new google.maps.LatLng(Lat, Long);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });

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

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

  }

}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

person geocodezip    schedule 23.05.2015

arrow_upward
1
arrow_downward

Ваша проблема в том, что ваш прослушиватель событий является асинхронным, поэтому к моменту его вызова цикл for достиг конца, а значение contentString находится в конце. Вам нужно исправить ваш прицел.

person Isaac Ray    schedule 23.05.2015
comment
Что именно ты имеешь ввиду? - person Bullman; 24.05.2015