Как я могу создать мультиблочные маршруты с XML-данными и картой листовок, используя открытые карты улиц
Привет, у меня есть проблема с несколькими маршрутами, использующими xml-данные, я не могу заставить его работать, когда я разбираю XML-файл с помощью jQuery parsing. Он читает только первый узел.
Мой Html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" /> <link href="css/leaflet-routing-machine.css" rel="stylesheet" /> <link href="examples/index.css" rel="stylesheet" />
<div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <div id="output"></div> <h2>Map</h2> </div> <div class="panel-body"> <div id="map" class="map"></div> <script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script> <script src="dist/leaflet-routing-machine.js"></script> <script src="examples/Control.Geocoder.js"></script> <script src="examples/config.js"></script> </div> </div> </div>
<script> $(document).ready(function () { $.ajax({ type: "GET", url: "DrivingPoints.xml", dataType: "xml", success: parseXml }); }); function parseXml(xml) { $(xml).find("point").each(function () { //Name = $(this).attr("name") Lat = $(this).find("lat").text() //color = $(this).find("color").text() Long = $(this).find("long").text() //Number = $(this).find("number").text() //Type = $(this).find("type").text() var control = L.Routing.control(L.extend(window.lrmConfig, { waypoints: [ L.latLng(Lat, Long), L.latLng(56.260965, 10.057878) ], geocoder: L.Control.Geocoder.nominatim(), routeWhileDragging: true, reverseWaypoints: true, showAlternatives: true, altLineOptions: { styles: [ { color: 'black', opacity: 0.15, weight: 9 }, { color: 'white', opacity: 0.8, weight: 6 }, { color: 'blue', opacity: 0.5, weight: 2 } ] } })).addTo(map); $("#output").append("Name: " + Name + ": Lat:" + Lat + " Long:" + Long + "<br />"); }); } var map = L.map('map'); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); L.Routing.errorControl(control).addTo(map); </script>
Мой XML
<?xml version="1.0" encoding="utf-8" ?> <destinations> <Trip number="11"> <point lat="56.238313" long="10.089360" name="Trip 1 start"> <color>blue</color> <lat>56.238313</lat> <long>10.089360</long> <type>Start</type> </point> <point lat="56.260965" long="10.057878" name="Trip 1 Destination"> <color>blue</color> <lat>56.260965</lat> <long>10.057878</long> <type>Destination</type> </point> </Trip> <Trip number="38"> <point lat="56.238313" long="10.089360" name="Trip 2 start"> <color>blue</color> <lat>56.238313</lat> <long>10.089360</long> <type>Start</type> </point> <point lat="56.260965" long="10.057878" name="Trip 2 Destination"> <color>blue</color> <lat>56.260965</lat> <long>10.057878</long> <type>Destination</type> </point> </Trip> </destinations>
Что я уже пробовал:
сначала я попытался поместить его в массив, но я не эксперт в jquery.