Javascript 在一张地图上显示多个谷歌地图标记和方向

我想把多个谷歌地图路线输出到一个谷歌地图上。数据取自具有多个标记的XML文件。每个标记都有一个起点和一个终点（以纬度和经度值的形式）。然后将这些标记添加到地图中，并调用谷歌地图方向服务在每个标记的起点和终点之间绘制路线

我遇到的问题是，只绘制了一条路线（如果我刷新页面，它似乎只是随机选择一个标记，并在这两个标记之间绘制方向）。其他标记根本不显示

我已经记录了for循环，以检查它是否正在为XML中的每个标记运行（它是）。我猜这和这两行有关，但这是一个猜测

directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();

我读过这个问题-，但并不真正理解答案/不知道它与我的情况有多相关。谢谢

    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() {}

jQuery（document）.ready（函数（$）{
var map=new google.maps.map（document.getElementById（“map_canvas”）{
缩放：13，
mapTypeId:“路线图”
});
//试试HTML5地理定位
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos=新的google.maps.LatLng（position.coords.lation，position.coords.longitude）；
地图设置中心（pos）；
map.setZoom（13）；
}，函数（）{
手持导航（真）；
});
}否则{
//浏览器不支持地理位置
手动定位（假）；
} 
directionsDisplay=new google.maps.DirectionsRenderer（）；
directionsService=new google.maps.directionsService（）；
//根据PHP文件的名称更改此选项
下载URL（“xml.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i

我认为您链接到的答案中的关键点是每条路线都需要自己的

方向渲染器

对象。它没有提到它，但似乎每个路由也应该有自己的

directionservice

对象。您在所有路由中共享这些对象中的一个。我怀疑这些共享对象在每条路由中都会被覆盖

以下是一个更新，它应该通过为每条管线创建新对象来解决此问题：

    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);
    } 

    // Change this depending on the name of your PHP file
    $.get("xml.php", function( xml ) {
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            addMarkerPair( markers[i] );
        }
    }, 'xml' );
});

function addMarkerPair( pair ) {
    function get( name ) {
        return pair.getAttribute( name );
    }
    var title = get("title");
    var mode = get("mode");
    var startpoint = new google.maps.LatLng(
        +get("startlat"),
        +get("startlng")
    );
    var endpoint = new google.maps.LatLng(
        +get("endlat"),
        +get("endlng")
    );
    calcRoute( mode, startpoint, endpoint );
    console.log('marker');
}

function calcRoute( mode, startpoint, endpoint ) {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    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);
        }
    });
}

jQuery（document）.ready（函数（$）{
var map=new google.maps.map（document.getElementById（“map_canvas”）{
缩放：13，
mapTypeId:“路线图”
});
//试试HTML5地理定位
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos=新的google.maps.LatLng（position.coords.lation，position.coords.longitude）；
地图设置中心（pos）；
map.setZoom（13）；
}，函数（）{
手持导航（真）；
});
}否则{
//浏览器不支持地理位置
手动定位（假）；
} 
//根据PHP文件的名称更改此选项
$.get（“xml.php”，函数（xml）{
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i

我还大胆地修改和简化了一些事情：

<