谷歌地图API - 多个信息窗口和自动居中

Question

我一直在拼凑各种代码来自互联网（包括StackOverflow），我有一个工作地图（几乎）哪些地理编码从数组中的代码和创建infowindows每一个。

两个问题：

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