设置缩放和中心以显示所有标记 - 在地图元素中显示蓝色

Question

我正在尝试使地图居中并适合最佳缩放级别以使用此代码显示所有标记

var searchname=document.getElementById("hidden_searchname").value;
if(trim(document.getElementById("longitude").value)!="")
{
    zoom=11; 
    lat=document.getElementById("latitude").value;
    longitude=document.getElementById("longitude").value;
}
else
{
    zoom=11;
    longitude="-88";
    lat="42";
}
latlng = new google.maps.LatLng(lat,longitude);
var myOptions = {
    zoom: zoom,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("map"), myOptions);

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

for (var i = 0; i < latlng.length; i++)
{
    latlngbounds.extend(latlng[i]);
}
//map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds));
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds); 

但它没有显示我得到的地图和控制台错误是 "type error c is null" 。网址是http://tinyurl.com/bp94qdy

在框中输入 Mcdonalds 并查看。

我调整了代码并使用下面的代码正确缩放

   map = new google.maps.Map(document.getElementById("map"), myOptions);


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

    for (var index in markersArray) {

       var lat = markersArray[index].lat;
       var lng = markersArray[index].lng;
   //alert(markersArray[index].lng);
       var latlng2 = new google.maps.LatLng(lat, lng);
        latlngbounds.extend(latlng2);
       }

    //map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds));
   map.setCenter(latlngbounds.getCenter());
      map.fitBounds(latlngbounds); 

地图现在显示为蓝色，直到我将鼠标悬停在某个地址上。这是因为变焦太远还是其他原因？

Answer 1

您的地图将指向太平洋中部，因此它是蓝色的。那是因为您没有正确阅读标记的纬度。而不是

  for (var index in markersArray) {

    var lat = markersArray[index].lat;
    var lng = markersArray[index].lng;

    var latlng2 = new google.maps.LatLng(lat, lng);
     latlngbounds.extend(latlng2);
}

你应该这样做

for (var i = 0 ; i < markersArray.length ; i++) {
     latlngbounds.extend(markersArray[i].getPosition());
}