我有用於向交互式Google地圖添加多個標記的腳本。我希望所有標記都保存不同的信息窗口

Question

我已經創建了下面的代碼。 此代碼生成帶有不同標記的Google Map。 我似乎沒有正確的代碼，以便每個標記將在mouseclick上顯示不同的信息窗口。 有什么方法可以在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>

Answer 1

這是相對簡單的。 在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]將獲得id為overlayContent1等的<div> （或其他元素）。然后在for循環外添加一個單擊處理程序，以打開正確的信息窗口：

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

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

currentInfoWindow檢查可確保一次僅打開一個覆蓋圖

我有用於向交互式Google地圖添加多個標記的腳本。我希望所有標記都保存不同的信息窗口

問題描述

1 個解決方案

解決方案1
0 2012-03-05 08:58:19

我有用於向交互式Google地圖添加多個標記的腳本。 我希望所有標記都保存不同的信息窗口

問題描述

1 個解決方案

解決方案1 0 2012-03-05 08:58:19

我有用於向交互式Google地圖添加多個標記的腳本。我希望所有標記都保存不同的信息窗口

解決方案1
0 2012-03-05 08:58:19