Question

我已阅读Google Maps API v3 multiple markers Infowindow和其他类似帖子。

我有一个由邮政编码数组生成的多个地图标记，我需要放在信息窗口内的信息来自另一个数组。我理解它的方式是循环在循环完成后得到我要求的而不是每次迭代得到它。我的两个数组如下：

var postcodes = ["postcode1", "postcode2", "postcode3", "postcode4"];
var placenames = ["placename1","placename2","placename3","placename4"];

以正常方式生成地图，使用以下循环将标记放置在地图上：

for(var i = 0; i < postcodes.length; i++) {
    var infowindow = new google.maps.InfoWindow({
        content: placenames[i]
    });
    geocoder.geocode({
        'address': postcodes[i]
    }, function(results, status) {
        if(status == 'OK') {
            var marker = new google.maps.Marker({
                map: map,
                icon: "<?php echo $view->getThemePath();?>/images/map-marker.png",
                position: results[0].geometry.location
            });
            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
        }
    });
}

我认为会发生的是，对于[i]的每次迭代，都会创建一个infowindow和marker。但实际发生的是，每个邮政编码都会在地图上放置4个标记，每个标记都会在触发点击事件时打开信息窗口，但信息窗口内的地名始终是最后一个地名。

我知道闭包存在问题，我试图将marker.addListener包装在一个不起作用的函数中。我试图遍历邮政编码循环中的每个地名，并打印出16个地名。

有人可以解释我出错的地方，但这并不是我需要理解的答案，所以我不会重复这个错误，因为我必须在这张地图上展开另一个工作项目。

Answer 1

在地理编码操作上使用函数闭包，以在标记点击侦听器函数中保持对i的引用。

概念证明小提琴]（http://jsfiddle.net/guL9vL0b/1/）

代码段

＆＃13;

var geocoder = new google.maps.Geocoder();
var map;
var bounds = new google.maps.LatLngBounds();
var postcodes = ["CH44 0, UK", "BN41 1", "DL1 3, UK", "E10 5, UK"];
var placenames = ["placename1", "placename2", "placename3", "placename4"];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  for (var i = 0; i < postcodes.length; i++) {
    var infowindow = new google.maps.InfoWindow({
      content: placenames[i]
    });
    geocoder.geocode({
      'address': postcodes[i]
    }, (function(i) { // function closure on i
      return function(results, status) {
        if (status == 'OK') {
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
          marker.addListener('click', function() {
            infowindow.setContent(placenames[i])
            infowindow.open(map, marker);
          });
          bounds.extend(marker.getPosition());
          map.fitBounds(bounds);
        }
      }
    })(i));
  }
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

＆＃13;

努力在谷歌地图内制作多个infowindows

1 个答案: