谷歌地图API -多个信息窗口和自动定心

Google Maps API - multiple info windows and automatic centering

本文关键字：窗口 信息窗 API 信息 谷歌地图      更新时间：2023-09-26

我一直在拼凑来自互联网(包括StackOverflow)的各种代码，我有一个工作地图(几乎)，从数组中地理编码邮政编码，并为每个创建信息窗口。

两个问题:

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

我不能自动把地图调到中间。我使用了一些在其他情况下工作的代码，但在我的代码中没有。

代码很容易理解:

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在geocode函数中的值有关。

任何帮助都非常感谢!

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

我不能自动把地图调到中间。我用了一点代码可以在其他情况下工作，但在我的代码。

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]));
}

将geocode功能提取到其自己的函数中，并使用参数接受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函数被多次调用，如果您只有几个标记，这并不是什么大问题，但如果您有数百或数千个标记，则会导致问题。在这种情况下，正确的方法是创建一个异步循环函数。你可以在我之前的一个回答中看到一个例子。

下面是基于您的示例的代码的功能示例。

两个问题:

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

我不能自动把地图调到中间。我用了一点代码可以在其他情况下工作，但在我的代码。

答案:

1)这是因为这里很可能有闭包问题。

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
});
相关文章：