单击小册子路由机中的标记时如何显示路径?

时间:2017-10-29 19:37:50

标签: javascript web-applications maps leaflet leaflet-routing-machine

我刚开始使用PhoneGap和Leaflet,我正在尝试创建一个应用程序。我有一个起源(用户的当前位置)和一些目的地。起初我不想显示任何路线,但当您点击/点击某个标记时,我想显示从原点到那里的路线。此外,如果用户点击其他标记,我希望路线能够更改。非常感谢,我非常感谢你!

var app = {
inicio: function() {
  this.iniciaFastClick();
},

iniciaFastClick: function() {
  FastClick.attach(document.body);
},

dispositivoListo: function() {
  navigator.geolocation.getCurrentPosition(app.pintaCoordenadasEnMapa, 
  app.errorAlSolicitarLocalizacion);
},

pintaCoordenadasEnMapa: function(position) {
  var miMapa = L.map('map').setView([position.coords.latitude, 
  position.coords.longitude], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/carmencode/cj9cms4xd5duc2rtid327
amaj/tiles/256/{z}/{x}/{y}?
access_token=pk.eyJ1IjoiY2FybWVuY29kZSIsImEiOiJjajljbXBjYnkxcmdhMnlud3Z6
b3JlbzF1In0.j_w8HZnQfrLArVJQpplmzA', {
  maxZoom: 18
  }).addTo(miMapa);

L.Routing.control({
waypoints: [
L.latLng(position.coords.latitude, position.coords.longitude),
L.latLng(38.0013731, -1.1420178)
],
    lineOptions: {styles: [{color: '#FC6C23'}]},

    routeWhileDragging: true
}).addTo(miMapa);


app.pintaMarcador([37.98534, -1.13585], 'Location2', miMapa);
app.pintaMarcador([38.0013731, -1.1420178], 'Location1', miMapa);
app.pintaMarcador([position.coords.latitude, position.coords.longitude], '¡Estoy aquí!', miMapa);


},

pintaMarcador: function(latlng, texto, mapa){
    var marcador = L.marker(latlng).addTo(mapa);
    marcador.bindPopup(texto).openPopup();
},


errorAlSolicitarLocalizacion: function(error) {
    console.log(error.code + ': ' + error.message);
},



};


if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
    app.inicio();
}, false);
document.addEventListener('deviceready', function() {
    app.dispositivoListo();
}, false);
}

0 个答案:

没有答案