Google Maps API - 多个信息窗口和自动居中

Question

我一直在拼凑互联网上的各种代码（包括 StackOverflow），并且我有一个工作地图（几乎），它从一个数组中对邮政编码进行地理编码并为每个邮政编码创建信息窗口。

两个问题：

1) 我的信息窗口应该从另一个数组中获取文本，始终使用最后一个数组值

2) 我无法让地图自动居中。我正在使用一些在其他情况下有效的代码，但在我的代码中没有。

代码是不言自明的：

var geocoder = new google.maps.Geocoder();

var map = new google.maps.Map(document.getElementById('map'), {
  //zoom: 10,
  //center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var postcodes = [
    "EH14 1PR",
    "KY7 4TP",
    "IV6 7UP"   
];

var descriptions = [
    "Slateford",
    "Cortachy",
    "Marybank"
];

var markersArray = [];

var infowindow = new google.maps.InfoWindow();

var marker, i, address, description;

for(var i = 0; i < postcodes.length; i++) {
    address = postcodes[i];
    description = descriptions[i];
    geocoder.geocode(
        {
            'address': address,
            'region' : 'uk'
        }, 
        function(results, status){
            if (status == google.maps.GeocoderStatus.OK) {
                marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map
                });
                markersArray[i] = marker;
                console.log(markersArray[i]);
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(description);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            } else {
                alert("Geocode was not successful for the following reason: " + status);
                return false;
            }
        }
    );

    var bounds = new google.maps.LatLngBounds();

    $.each(markersArray, function (index, marker) {
        bounds.extend(marker.position);
    });

    map.fitBounds(bounds);
    console.log(bounds);
}

有什么想法吗？问题似乎与地理编码函数内的计数器 i 的值有关。

非常感谢任何帮助！

Answer 1

1) 我的信息窗口，它应该从另一个数组中获取它们的文本， 总是使用最后一个数组值

2) 我无法让地图自动居中。我正在使用一点 在其他情况下有效的代码，但在我的 代码。

1) 是的，这是一个关闭问题。这就是我解决它的方法。

我创建一个对象来存储我将使用的所有属性。在您的示例中，我将使用postcode 和description。

function location(postalcode, desc){
  this.PostalCode = postalcode;
  this.Description = desc;
}

现在快速循环将所有location 对象添加到数组中。

var locations = [];
for(var i = 0; i < postcodes.length; i++) {
     locations.push(new location(postcodes[i], descriptions[i]));
}

使用参数将地理编码功能提取到其自己的函数中以获取location 对象。然后，您可以遍历 location 对象数组并分别进行地理编码。因此，现在构建和发送请求时，邮政编码和描述都在范围内。

function GeoCode(singleLocation){
     geocoder.geocode(
        {
            'address': singleLocation.PostalCode,
            'region' : 'uk'
        }, 
        function(results, status){
            if (status == google.maps.GeocoderStatus.OK) {
               var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map
                });

                //quick and dirty way
                bounds.extend(marker.position);
                map.fitBounds(bounds);                    

                markersArray[i] = marker;
                console.log(markersArray[i]);

                google.maps.event.addListener(marker, 'click', function() {
                        infowindow.setContent(singleLocation.Description);
                        infowindow.open(map, this); //this refers to the marker
                });

            } else {
                alert("Geocode was not successful for the following reason: " 
                      + status);
                return false;
            }
        }
    );
} 

2) 正如您在上面看到的那样，快速而肮脏的方法是扩展并适应地理编码回调函数内部的边界。这会导致fitBounds 函数被多次调用，如果您只有几个标记，这并不是什么大问题，但如果您有数百或数千个标记，则会导致问题。在这种情况下，正确的方法是创建一个异步循环函数。您可以在 my previous answers 之一上看到它的示例。

这是functioning example of the code based on your example。

Answer 2

两个问题：

1) 我的信息窗口，它应该从另一个数组中获取它们的文本， 总是使用最后一个数组值

2) 我无法让地图自动居中。我正在使用一点 在其他情况下有效的代码，但在我的 代码。

答案：

1) 这是因为您很可能在这里遇到了closure 问题。

2) center 将定义地图的中心点，但在您的代码中，您已对此进行了注释 //center: new google.maps.LatLng(-33.92, 151.25), 删除此行的注释将居中映射到纬度 -33.92 和经度 151.25。
在下面使用：

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});