Отображение нескольких маркеров и направлений карты Google на одной карте

Question

Я хотел бы выводить несколько маршрутов Google Map на одну карту Google. Данные берутся из XML-файла с несколькими маркерами. Каждый маркер имеет начальную точку и конечную точку (в виде значений широты и долготы). Эти маркеры затем добавляются на карту, и вызов в службу Google Maps Directions Service делается для маршрутизации между начальной и конечной точками каждого маркера.

Проблема, с которой я сталкиваюсь, заключается в том, что нарисован только один маршрут (если я обновляю страницу, она, кажется, просто выбирает один из маркеров наугад и рисует направления между этими двумя маркерами). Другие маркеры вообще не отображаются.

У меня есть console.logged цикл for, чтобы проверить, что он запущен для каждого маркера в XML (это). Я предполагаю, что это что-то делать с этими двумя линиями здесь, но это предположение ...

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

Я прочитал этот вопрос - Using Google Maps 3 API to get multiple routes on a Map, но на самом деле не понимаю, ответ/знаю, как это касается моей ситуации. Благодарю.

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

Answer 1

Я думаю, что ключевым моментом в ответ вы связаны, что каждый маршрут нужен свой DirectionsRenderer объект. И он не упоминает об этом, но кажется вероятным, что каждый маршрут должен также иметь свой собственный объект 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); 
    } 

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

Я также взял на себя смелость фиксации и упрощение несколько вещей:

1. Переехал тело цикла маркера к отдельной функции addMarkerPair для лучшей читаемости.
2. Добавлена ​​функция get внутри addMarkerPair в виде сокращенного обозначения для pair.getAttribute.
3. Используется + вместо parseInt. Либо один сделает то же самое; Мне нравится + за его краткость.
4. Добавить несколько недостающих var объявлений.
5. Передал необходимые параметры в calcRoute как функциональные параметры вместо глобальных переменных.
6. $.get вместо downloadUrl. Нет необходимости в вашей собственной функции, когда jQuery уже есть.

Кроме того, в качестве другой альтернативы синтаксическому анализу XML вы можете использовать jQuery для доступа к элементам XML. Но я придерживался кода ближе к тому, как вы это делаете.