如何使用开放街道地图创建包含XML数据和传单地图的多路径路线 [英] How can I create multible routes with XML data and leaflet map, using open street maps

查看：91
本文介绍了如何使用开放街道地图创建包含XML数据和传单地图的多路径路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你好我使用xml数据的多路径问题，当我使用Jquery解析解析XML文件时，我无法使它工作。它只读取第一个节点。



我的Html

<前lang =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，us er-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 < span class =code-attribute> / >

< link href = examples / index.css rel = 样式表 / > 





 <   div     class   =  container >  
 
 <   div     class   = 面板 - 默认 >  
 <   div     class   =  panel-heading >  
 <   div     id   = 输出 >   <   / div  >  
 <   h2  > 地图 <   / h2  >  
 <   / div  >  
 <   div     class   =  panel-body >  
 
 
 <   div     id   = < span class =code-keyword> 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  >  
 <  < span class =code-leadattribute> script     src   =  examples / Control.Geocoder.js >  <   /   script  >  
 
 
 <   script     src   =  examples / config.js >  <   /   script  >  
 
 
 
 <   / div  >  
 <   / div  >  
 <   / div  >  





< script> 
 $（ document ）。ready（ function （）{
 $ .ajax （{
类型：  GET，
 url：  DrivingPoints.xml，
 dataType：  xml，
成功：parseXml 
}）; 
}）; 
 
  function  parseXml（xml）{
 $（xml）.find（   point）。each（ function （）{
 
  //  名称= $（this）.attr（name） 
 
 Lat = $（ this ）。find（  lat ）。text（）
 
  //   color = $（this） .find（color）。text（） 
 
 Long = $（ this ）。find（  long）。text（）
 
  //   Number = $（this）.find（number）。text（） 
 
  //  < span class =code-comment> 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：' 黑色'，不透明度： 0 。 15 ，重量： 9 }，
 {color：'  white'，不透明度： 0 。 8 ，重量： 6 }，
 {color：'  blue'，不透明度： 0 。 5 ，权重： 2 } 
 ] 
} 
}））。addTo（map）; 
 
 
 $（  #output）。append（  名称： +名称+  ：& nbsp; Lat： + Lat +   & nbsp; Long： + Long +  < br /> ）; 
 
 
 
 
 
}）; 
} 
 
  var  map = L.map（' < span class =code-string> map'）; 
 
 L.tileLayer（'  http：// {s} .tile.osm.org / {z} / {x} / {y} .png'，{
归因：' & copy;< a href =http://osm.org/copyright> OpenStreetMap< / a>贡献者' 
}）。addTo（map）; 
 
 
 L.Routing.errorControl（control）.addTo（map）; 
 
 
< / script>







我的XML 

 <？  xml     version   =  1.0   编码  =   utf-8   ？ >  
 
 <  目的地 >  
 <  旅行   数字  =  11 >  
 
 <   point     lat   =  56.238313   < span class =code-attribute> long   =  10.089360   名称  = 旅行1开始 >  
 <   color  >  blue <   / color  >  
 < ;   lat  >  56.238313 <   / lat  >  
 < ;   long  >  10.089360 <   / long  >  
 < ;  类型 > 开始<   / type  >  
 < ;   / point  >  
 
 <   point     lat   =  56.260965     long   = < span class =code-keyword> 10.057878    name   = 旅程1目的地 >  
 <  颜色 >  blue <   / color  >  
 <   lat  >  56.260965 <   / lat  & gt;  
 <   long  >  10.057878 <   / long   >  
 <   type  > 目的地<   / type   >  
 <   / point  >  
 
 
 <   / Trip  >  
 <   Trip     number   =  38 >  
 
 < span class =code-keyword><   point     lat   =  56.238313    long   =  10.089360    name   = 旅程2开始 >  
 <  颜色 >  blue <  < span class =code-leadattribute> / color  >  
 <   lat  >  56.238313 <   / lat  >  
 <   long  >  10.089360 <   / long  >  
 <  类型 > 开始<   / type  >  
 <   / point  >  
 
 < span class =code-keyword><   point     lat   =  56.260965    long   =  10.057878    name   = 旅程2目的地 >  
 <  颜色 >  blue <   / color  >  
 <   lat  >  56.260965 <   / lat  >  
 <   long  >  10.057878 <   / long  >  
 <   type  > 目的地<   / type  >  
 <   / point  >  
 
 
 <   /旅行 >  
 
 <   / destinations  >





我是什么尝试过：



i先试试把它放在一个数组中，但我不是jquery的专家。

解决方案

（ document ）。ready（ function （）{


.ajax（{
type： GET，
url： DrivingPoints.xml，
dataType： xml，
success：parseXml
}）;
}）;

function parseXml（xml）{


（xml）.find（ point）。each（ function （）{

// 名称=


Hi i have problem with multible routes using xml data, i cannot get it to work when i am parsing XML file using Jquery parsing. It only reads the first node.

My 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>




My 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>



What I have tried:

i have tryede to put it in an array first, but i am no expert of jquery.

解决方案

(document).ready(function () {


.ajax({ type: "GET", url: "DrivingPoints.xml", dataType: "xml", success: parseXml }); }); function parseXml(xml) {


(xml).find("point").each(function () { //Name =


这篇关于如何使用开放街道地图创建包含XML数据和传单地图的多路径路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆