Question

我一直在拼凑来自互联网上的各种代码（包括StackOverflow），并且我有一张工作地图（差不多），它从一个数组中对邮政编码进行地理编码并为每一个创建信息。< / p>

两个问题：

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函数，如果您只有几个标记，则不是很重要，但如果您有数百或数千个标记，则会导致问题。在这种情况下，执行此操作的 right-way 是创建异步循环函数。您可以在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
});

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

2 个答案: