Question

好的，所以过去几天我一直在研究这个问题，但似乎仍无法让它发挥作用：（

我有一系列属性，如下所示：

var map_markers = [
    ['London Road, Amesbury, SP4 7ER <br/> 2nd Line', 'London Road, Amesbury,', 1],
    ['Countess Court, Amesbury, SP4 7ER <br/> 2nd Line', 'Countess Court, Amesbury,', 2],
    ['Windsor Road, Salisbury, SP2 7NF <br/> 2nd Line', 'Windsor Road, Salisbury,', 3],
    ['Bishopdown Road, Salisbury, SP1 3DT <br/> 2nd Line', 'Bishopdown Road, Salisbury,', 4],
    ['Gainsborough Close, Salisbury, SP2 9HD <br/> 2nd Line', 'Gainsborough Close, Salisbury,', 5],
];

现在，我想要的是在用户点击标记时弹出一个信息窗口。我可以让标记代码正常工作，但是我遇到了将信息绑定到标记的问题，无论我在何处或如何设置内容，它似乎只能获取最后一个元素。这是我目前的代码减去代码点击监听器，因为这是我需要帮助的。

我想在信息窗口中显示的内容是每个属性的数组中的第一个元素：

function init_map(map_id, center_address, markers) {

    geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': center_address, 'region': 'uk' }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) { 

         //Init Map Options
         var mapOptions = {
            zoom: 11,
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         }

         var map = new google.maps.Map(document.getElementById(map_id), mapOptions);

         setMarkers(map, markers);
         infowindow = new google.maps.InfoWindow({content: "loading..."});

      } else {

        alert("Unable to find address: " + status);

      }

  });

}

function setMarkers(map, markers) {

        for (var i = 0; i < markers.length; i++) {
            var locations = markers[i];
            var address = markers[i][1];

            geocoder.geocode( { 'address': address , 'region': 'uk' }, function(results, status) { 

             if (status == google.maps.GeocoderStatus.OK) { 

                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                    map: map,
                    title: address
                });

                } else {
                    alert("There was a issue getting the property information.")
                }       
        });
      }
   }

我知道那里有很多教程，但这些教程似乎都不适用于我的代码，这段代码是因为标记是在地理编码函数中分配的???这是必需的，因为我的数据不包含Lng / Lat值。

请注意，我是一个完整的JS菜鸟，因此最受欢迎的是编码示例：）

提前致谢...

Answer 1

它正在为数组中的最后一个元素工作这一事实告诉我，你可以引用一个未在循环内声明的变量，或者你将循环计数器变量传递给另一个函数。

在地理编码回调函数中，您使用不带var声明的变量标记，这将导致创建一个名为marker的全局变量，该回调的所有后续执行都将覆盖。完成地理编码后，marker将引用添加的最后一个标记。

我也可能会在创建标记的同时绑定标记的点击，例如：

function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
        var locations = markers[i];
        var address = markers[i][1];
        // store the infowindow content for this marker
        var infocontent=locations[0];
        geocoder.geocode( { 'address': address , 'region': 'uk' }, function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK) { 
                // use var to stop our marker getting overwritten
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                    map: map,
                    title: address
                });
                // bind to the click event of the marker
                google.maps.event.addListener(marker, 'click', function() {
                    var infwin=new google.maps.InfoWindow({content: infocontent});
                    infwin.open(marker);
                });

            } else {
                alert("There was a issue getting the property information.")
            }       
        });
    }
}

Google Maps API，信息窗口仅显示数组中的最后一个元素

1 个答案: