2017-05-29 47 views
9

LeafletJS: L.Routing.resine routeletjs ve hover etkinliğinde rotada nasıl kullanılır?

var mymap = L.map('mapid').setView([1.369115, 103.845436], 12); 
 
     L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxN25pNjMwMDFxMndvNzZhb2xqZmxxIn0._RFHs1Tj81KAk7u-5CJ6bA', { 
 
      attribution: 'My Office', 
 
      maxZoom: 18, 
 
      id: 'mapbox', 
 
      accessToken: 'pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxOGFsa3owMDBkMnZwZHdmeHdmdzBlIn0.jg5bQjGhfAEmFMRxLArGFQ' 
 
     }).addTo(mymap); 
 
     
 
     var carIconStart = L.icon({ 
 
     iconUrl: 'img/car-onmap.png', 
 
     iconSize:  [40, 40], // size of the icon 
 
     popupAnchor: [0, -20] // point from which the popup should open relative to the iconAnchor 
 
    }); 
 
     
 
     var carIconEnd = L.icon({ 
 
     iconUrl: 'img/car-onmap.png', 
 
     iconSize:  [40, 40], // size of the icon 
 
     popupAnchor: [0, -20] // point from which the popup should open relative to the iconAnchor 
 
    }); 
 
     
 

 
     L.marker([1.29828408457,103.789110693]).addTo(mymap).bindPopup("Start from Office"); 
 
L.marker([1.41887924373,103.847815159]).addTo(mymap).bindPopup("End in MyHome"); 
 
      
 
     var control = L.Routing.control({ 
 
      waypoints: [ 
 
       L.latLng(1.29828408457,103.789110693), 
 
       L.latLng(1.41887924373,103.847815159) 
 
      ], 
 
      lineOptions:{ 
 
       styles: [{color: 'lightgreen', opacity: 1, weight: 5}], 
 
       addWaypoints:false 
 
      }, 
 
      draggableWaypoints: false, 
 
      createMarker: function(){ return false; }, 
 
      router: L.Routing.mapbox('pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxOGFsa3owMDBkMnZwZHdmeHdmdzBlIn0.jg5bQjGhfAEmFMRxLArGFQ'), 
 
      
 
      }).addTo(mymap); 
 
     
 
     L.Routing.itinerary({pointMarkerStyle: {radius: 5,color: '#03f',fillColor: 'white',opacity: 1,fillOpacity: 0.7}}); 
 
     L.Routing.errorControl(control).addTo(mymap);
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.css" rel="stylesheet"/> 
 

 

 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.js"></script> 
 

 
<style> 
 
     body { margin:0; padding:0; } 
 
     #mapid { height:220px;} 
 
     .leaflet-routing-container{ 
 
      display: none; 
 
     } 
 
    </style> 
 
    
 
    <body> 
 
     <div id="mapid"></div> 
 
    </body>

Ben yol noktasının rotada vurgulu olay eklemek istiyorum.

Broşürün belgelerinde, no hover olayı ekle, L.Routing.itinerary'ı kullanabilir.

enter image description here

http://www.liedman.net/leaflet-routing-machine/api/#itineraryoptions

beni Lütfen tavsiye .. Sen Broşür Etiket Plugin kontrol edebilirsiniz size

cevap