auto zoom/center google maps api？

我非常有經驗，當它來到PHP的MySQL，但JavaScript讓我撓我的腦袋。我正在嘗試將谷歌地圖添加到我的網站以顯示我的數據庫中的圖片被拍攝的位置。我得到了靜態谷歌地圖工作，但由於url字符的限制，它只會顯示37個標記。我遵循谷歌地圖api文檔中的教程，並且我有一張地圖，它將顯示數據庫中圖像的所有座標。我的問題是，我不能爲我的生活弄清楚如何讓地圖自動居中和自動縮放以適合我所有的標記。我的地圖測試網站位於maptest。我發現這個tutorial關於如何自動居中/縮放我的地圖，無論我把他的代碼放在哪裏，我都會得到錯誤。這是我對我的地圖的代碼不自動縮放/中心：auto zoom/center google maps api？

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Maps AJAX + mySQL/PHP Example</title> 
    <script src="http://maps.google.com/maps/api/js?    key=AIzaSyDnMkDkoCHNE7BG4eobjeMJdWWZtdZvzeg&sensor=false" 
     type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 

    var customIcons = { 
    restaurant: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
    }, 
    bar: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
    } 
}; 

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(42.293564,-39.07617), 
    zoom: 2, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("phpsqlajax_genxml3.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     //var address = markers[i].getAttribute("address"); 
     //var type = markers[i].getAttribute("type"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + name + "</b> <br/>"; 
     //var icon = customIcons[type] || {}; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     //icon: icon.icon, 
     //shadow: icon.shadow 
     }); 

     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    }); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 

    //]]> 
    </script> 
</head> 

    <body onload="load()"> 
    <div id="map" style="width: 600px; height: 400px"></div> 
    </body> 
    </html>

來源

2012-10-19 user1738974

試過嗎？

var fitToMarkers = function(markers) { 
    var bounds = new google.maps.LatLngBounds(); 
    var length = markers.length; 
    for (var i = 0; i < length; i++) { 
     bounds.extend(new google.maps.LatLng(markers[i].lat, markers[i].lng)); 
     map.fitBounds(bounds); 
    } 
};

來源

2012-10-19 14:42:14

感謝您的回覆，我還沒有嘗試過。我可以把var fitToMarkers放在中心位置嗎？這樣的：function負載（）{ VAR地圖=新google.maps.Map（的document.getElementById（「映射」），{ 中心：fitToMarkers，變焦：2，的mapTypeId： '路線圖' }）; var fitToMarkers = function（markers）{ var bounds = new google.maps.LatLngBounds（）; var length = markers.length;對於（var i = 0; i user1738974

auto zoom/center google maps api？

回答

相關問題