[英]Google Maps API fitBounds resulting in 0,0 location
我正在嘗試使用以下代碼行使地圖邊界適合標記:
var latlngbounds = new google.maps.LatLngBounds();
latlngbounds.extend(latlng);
map.fitBounds(latlngbounds);
由於某種原因,地圖縮放到地圖上的位置 0,0。
更新 1:似乎可以在 IE9 中運行,但不能在 Chrome 中運行。 在 Chrome 開發者模式下收到以下錯誤信息: Port error: Could not establish connection. Receiving end does not exist.
Port error: Could not establish connection. Receiving end does not exist.
更新 2:在 IE9 中重新加載頁面后,它也停止工作。
這是我的代碼。 我一定是在做一些基本的錯誤嗎?
//variables
var map;
var markers = [];
var latlngbounds;
//initialize google map
function initialize()
{
var myOptions = {
center: new google.maps.LatLng(-26.17706, 28.34613),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
latlngbounds = new google.maps.LatLngBounds();
//display markers
updateMarkersDisplayed();
}
//displays google map after site load complete
google.maps.event.addDomListener(window, 'load', initialize);
//retrieves markers for map
function updateMarkersDisplayed()
{
//php get url
var searchUrl = 'getCoords.php';
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markerNodes.length; i++) {
var id = markerNodes[i].getAttribute("device_id");
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createMarker(latlng, id);
latlngbounds.extend(latlng);
}
});
//zoom map to display all markers
map.fitBounds(latlngbounds);
}
//create marker and display on map if not already visible
function createMarker(latlng, id) {
var iconUrl = 'images/phones.png';
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: id,
icon: iconUrl
});
markers.push(marker);
markers[markers.length-1].setMap[map];
}
//download xml file containing markers specified by the GET parameters contained in the url passed
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.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
//parse text returned by php script
function parseXml(str) {
if (window.ActiveXObject)
{
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
else if (window.DOMParser)
{
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
//capture extra XMLHttpRequest responses
function doNothing() {}
以 0,0 為中心的 google.maps.LatLngBounds 是空邊界的征兆。
您正在為標記數據使用 XML。 不工作的瀏覽器可能不喜歡您的 XML,請嘗試將這些瀏覽器直接指向 XML 提要並修復報告的任何問題。
不得不移動map.fitBounds(latlngbounds);
在downloadUrl(searchUrl, function(data) {
function 中,在 XML 下載完成之前調用了fitBounds
。
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markerNodes.length; i++) {
var id = markerNodes[i].getAttribute("device_id");
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
bounds.extend(latlng);
createMarker(latlng, id);
}
//zoom map to display all markers
map.fitBounds(bounds);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.