OSRM - 使用当前位置创建方向链接

Question

这就是我想要做的。我有两个经纬度。一个是目标或终点，另一个是stop.

我正在尝试在浏览器中打开地图，该地图使用 OSRM 通过站点查找从个人或当前位置到终点的路线。

我测试了这个链接：

https://map.project-osrm.org/?z=16¢er=43.411867%2C3.193932&loc=43.415569%2C3.195112&loc=43.408945%2C3.191700&hl=de&alt=0&srv=0

很好。但我想添加一个控件，用户可以在其中输入他们的当前位置。

我尝试添加

&loc=0%2C0

作为起点。

Https：//map.project-osrm.org/？z = 16＆Center = 43.411867％2C3.193932＆loc = 0％2C0＆loc = 43.415569％2C3.195112＆loc = 43.408945％2C3.1919191700＆alt = 0＆s = 0＆sat 现在有三个控制箱。但是第一个控件没有提供进入当前位置的选项

如何增加输入自定义起点的可能性？

Answer 1

jsFiddle 演示

：

只要您拖动并释放其中一个标记，Javascript 代码就会向 OSRM 路线服务发送请求 - 并在 OpenStreetMap 上将建议路线绘制为蓝线：

'use strict';

function processOsrmReply(data) {

  myMap.flyToBounds(markersGroup.getBounds());

  if (data.code === 'Ok') {
    data.routes.forEach(function(route) {
      routesGroup.addData(route.geometry);
    });
  }
}

function sendOsrmRequest() {
  routesGroup.clearLayers();

  var url = 'https://router.project-osrm.org/route/v1/car/' +
    parseFloat(startMarker.getLatLng().lng).toFixed(6) + ',' +
    parseFloat(startMarker.getLatLng().lat).toFixed(6) + ';' +
    parseFloat(stopMarker.getLatLng().lng).toFixed(6) + ',' +
    parseFloat(stopMarker.getLatLng().lat).toFixed(6) + ';' +
    parseFloat(finalMarker.getLatLng().lng).toFixed(6) + ',' +
    parseFloat(finalMarker.getLatLng().lat).toFixed(6) +
    '?overview=simplified' +
    '&alternatives=1' +
    '&steps=false' +
    '&annotations=false' +
    '&geometries=geojson';

  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      var data = JSON.parse(this.response);
      processOsrmReply(data);
    }
  };
  request.send();
}

var startPosition = [43.411867, 3.193932];
var stopPosition = [43.415569, 3.195112];
var finalPosition = [43.408945, 3.191700];

var myMap = L.map('myMap').setView(stopPosition, 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);

var markersGroup = L.featureGroup().addTo(myMap);
var routesGroup = L.geoJSON().addTo(myMap);

var overlays = {
  'Show start, stop, finish markers': markersGroup,
  'Show OSRM route geometry': routesGroup
};

L.control.layers(null, overlays, {
  collapsed: false
}).addTo(myMap);

var startMarker = L.marker(startPosition, { draggable: true })
  .on('dragend', sendOsrmRequest)
  .bindPopup('Start')
  .addTo(markersGroup);

var stopMarker = L.marker(stopPosition, { draggable: true })
  .on('dragend', sendOsrmRequest)
  .bindPopup('Stop')
  .addTo(markersGroup);

var finalMarker = L.marker(finalPosition, { draggable: true })
  .on('dragend', sendOsrmRequest)
  .bindPopup('Finish')
  .addTo(markersGroup);

sendOsrmRequest();

html,
body {
  margin: 0;
  padding: 0;
}

#myMap {
  position: absolute;
  top: 2em;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

#myStatus {
  position: absolute;
  z-index: 2;
  width: 100%;
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css" type="text/css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>

<div id="myStatus">Drag the 3 markers to calculate the OSRM route</div>
<div id="myMap"></div>