Martin Lauritsen Ответов: 1

Как я могу создать мультиблочные маршруты с 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 + ":&nbsp;Lat:" + Lat + "&nbsp;Long:" + Long + "<br />");





          });
      }

      var map = L.map('map');

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <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.

1 Ответов

Рейтинг:
0

gggustafson

Если у вас возникли проблемы с jQuery, посетите сайт учебник по jQuery[^]. Если у вас возникли проблемы с JavaScript, посетите сайт Учебник По JavaScript[^].