У меня есть скрипт для добавления нескольких маркеров на интерактивную карту Google. Я хочу, чтобы все маркеры содержали разные информационные окна - PullRequest
Новая
       40

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

0 голосов
/ 05 марта 2012

Я уже создал код ниже. Этот код генерирует карту Google с разными маркерами. Кажется, я не совсем правильно понял код, чтобы каждый маркер при щелчке мышью отображал отдельное информационное окно. Есть ли способ добавить код в цикл for, чтобы все маркеры создавались с разными информационными окнами с разным содержимым? 

<body onload="initialize()">

  <div id="map_canvas" style="width: 800px; height: 500px;"></div>

  <script type="text/javascript">
    function initialize() {
      var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(23.241346, 18.281250),
      mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"),
                                    myOptions);

      setMarkers(map, locations);
    }

     var locations = [
       ['AU', -37.850565, 144.980289 , 4],
       ['AS', 48.1670845, 16.3465254, 5],
       ['BE', 50.8826906, 4.4570261, 3],
       ['BR', -23.5004937, -46.8482093, 2],
       ['CZ', 50.0878114, 14.4204598, 1],
       ['DM', 55.6710507, 12.4401635, 6],
       ['FI', 60.2101064, 24.8251788, 7],
       ['FR', 48.8744779, 2.1668675, 8],
       ['GE', 51.19423, 6.70568, 9],
       ['GR', 38.0433281, 23.797971, 10]
     ];

     function setMarkers(map, locations) {
       var image = new google.maps.MarkerImage('punaise.png',
         new google.maps.Size(30, 30),
         new google.maps.Point(0,0),
         new google.maps.Point(0, 32));
       var shadow = new google.maps.MarkerImage('schaduw.png',
         new google.maps.Size(30, 30),
         new google.maps.Point(0,0),
         new google.maps.Point(0, 32));

       var shape = {
         coord: [1, 1, 1, 20, 18, 20, 18 , 1],
         type: 'poly'
       };

       for (var i = 0; i < locations.length; i++) {
         var entity = locations[i];
         var myLatLng = new google.maps.LatLng(entity[1], entity[2]);
         var marker = new google.maps.Marker({
           position: myLatLng,
           map: map,
           shadow: shadow,
           icon: image,
           shape: shape,
           title: entity[0],
           zIndex: entity[3],
         });
       }
    }
  </script>

1 Ответ

0 голосов
/ 05 марта 2012

Это относительно просто; в вашем цикле for вы хотите запустить информационное окно, что-то вроде: 

for (var i = 0; i < locations.length; i++) {
    var entity = locations[i];
    var myLatLng = new google.maps.LatLng(entity[1], entity[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: entity[0],
        zIndex: entity[3],
    });
    infoWindow = new google.maps.InfoWindow({
        content: document.getElementById("overlayContent" + [i]).innerHTML
    });
}

overlayContent[i] получит <div> (или другой элемент) с id из overlayContent1 и т. Д. Затем вне цикла for добавьте обработчик щелчков, который открывает правильное информационное окно: 

google.maps.event.addListener(marker, "click", function () {

    if (currentInfoWindow) {
        currentInfoWindow.close();
    }
    infoWindow.open(gmap, marker);
    currentInfoWindow = infoWindow;
});

Проверка currentInfoWindow гарантирует, что одновременно открыт только один оверлей

...