我想在一个Google地图上输出多个谷歌地图路线。数据来自一个包含多个标记的XML文件。每个标记都有起点和终点(以纬度和经度值形式表示)。然后将这些标记添加到地图上,并调用Google地图方向服务以在每个标记的起点和终点之间绘制路径。
我的问题是只绘制了一条路线(如果刷新页面,似乎只会随机选择一个标记并画出两个标记之间的路线)。其他标记根本没有显示。
我已经使用console.log记录了for循环,以检查它是否对XML中的每个标记运行(是的),我猜测可能与这两行代码有关,但这只是一个猜测...
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
我看过这个问题 - 使用Google Maps 3 API在地图上获取多条路线,但我并不真正理解答案/不知道它与我的情况有多大关系。谢谢。
jQuery(document).ready(function($) {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 13,
mapTypeId: 'roadmap'
});
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(pos);
map.setZoom(13);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
// Change this depending on the name of your PHP file
downloadUrl("xml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var title = markers[i].getAttribute("title");
mode = markers[i].getAttribute("mode");
startpoint = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("startlat")),
parseFloat(markers[i].getAttribute("startlng")));
endpoint = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("endlat")),
parseFloat(markers[i].getAttribute("endlng")));
calcRoute();
console.log('marker');
}
});
directionsDisplay.setMap(map);
});
function calcRoute() {
var request = {
origin: startpoint,
destination: endpoint,
//waypoints: waypts,
travelMode: google.maps.DirectionsTravelMode[mode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
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() {}
$.get()
而不是downloadUrl()
时忘记了双重检查代码。我更新了代码以删除var xml = data.responseXML;
,因为这不再需要,并在$.get()
调用中添加了显式的“xml”数据类型(回调函数之后的最后一个参数)。如果您的服务器为XML文件设置了正确的MIME类型标头,则可能不需要该参数,但添加该参数可以确保jQuery为您解析XML。 - Michael Geary