我有用于向交互式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