我正在解析 XML 以直接从数据库中获取多个标记，因此为此使用了 Google 示例。我现在需要在 map 上显示用户的位置(作为中心点)。我发现在地理定位之后创建一个函数来加载 map 很棘手，这就是我出错的地方。
如您所见，我可以提醒纬度和经度，但是本地图首先加载时，它不会使 map 以这些坐标为中心。之后我尝试创建一个函数来运行 map ，但我一定遗漏了一些东西。 如果有人可以帮助我，那就太好了 - 或者甚至可以将加载功能移动到哪里。
我工作的测试页面位于此处:http://www.musecosystems.com/app/event_map2.html
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(
function (position) {
var current_latitude = position.coords.latitude;
var current_longitude = position.coords.longitude;
alert ("Latitude"+current_latitude+"Longitude"+current_longitude);mapServiceProvider(position.coords.latitude,position.coords.longitude);
}
);
}
</script><script>
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.046575, -2.8007399),
zoom: 16,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
document.getElementById("map").style.width=screen.width+"px";
document.getElementById("map").style.height=screen.height+"px";
document.getElementById("map").style.padding="0px";
document.getElementById("map").style.margin="0px";
// Change this depending on the name of your PHP file
downloadUrl("http://www.musecosystems.com/app/server/venue_output.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 event_name = markers[i].getAttribute("event_name");
var event_start = markers[i].getAttribute("event_start");
var event_link = markers[i].getAttribute("event_link");
var type = markers[i].getAttribute("location_status");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("longitude")));
var html = "<b>" + name + "</b>" + "<br/>" +("<a href='" + event_link + "'>" + event_name + "</a>");;
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" ></div>
最佳答案
我会尝试以下操作:
...
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var current_latitude = position.coords.latitude;
var current_longitude = position.coords.longitude;
load(current_latitude, current_longitude);
});
} else {
load(54.046575, -2.8007399);
}
</script>
...
function load(center_lat,center_lng) {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(center_lat, center_lng),
zoom: 16,
mapTypeId: 'roadmap'
});
...
<body><div id="map"></div></body>
顺便说一句:有一个很好的Firefox extension called Geolocater测试地理定位是否按预期工作。
关于javascript - 在*找到用户位置后*加载 Google map ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11246521/