我使用传单0.7.7创建了一个地图，并使用geojson数据添加了一些标记和图层。 我想在每个标记中添加一个链接以打开OSRM页面，起点以所选标记为中心。 在我的data_marker_layer.js中，我有这样的结构
{
"type": "Feature",
"properties": {
"marker-color": "#0000ff",
"marker-size": "medium",
"marker-symbol": "water",
"name": "Fontana Valle",
"address": "Via della Valle 19 - VALLE LOMELLINA",
"description": '<div style="width: 240px; text-align:justify;">Fontanella con acqua potabile, si trova difronte alla Piazza Corte Granda. </div><p text-align="center";><a href="http://www.mappeattive.com/wp-content/uploads/2015/11/fontanavallelomellina.jpg"><img data-id="2021" src="http://www.mappeattive.com/wp-content/uploads/2015/11/fontanavallelomellina.jpg" alt="Fontanella Acqua Potabile" width="240" height="140" class="alignnone size-medium wp-image-2021" /></a></p>'
},
"geometry": {
"type": "Point",
"coordinates": [
8.664894998073578,
45.150788440748805
]
}
}
并且标记弹出窗口的代码映射是例如：
function interaction(feature, layer){
layer.on({
click: function click (e){var popupContent = "<strong>" +
feature.properties.name + "</strong><br />"+feature.properties.address +"<br />";
if (feature.properties.description) {
popupContent += feature.properties.description+'GPS: '+feature.geometry.coordinates;
}
layer.bindPopup(popupContent,{maxWidth: 320});
}
})
}
如何编写一些代码来添加指向＆＃34;获取路线＆＃34;并使用标记坐标打开OSRM路由器或Googlemap？ 我不是开发人员，所以我不知道是否可以像使用this.feature.geometry.coordinates一样工作
任何提示或我可以在哪里寻找解释？
答案 0 :(得分：0)
如果你想用OSRM打开一个新页面，以你的地图为中心并以起点作为标记坐标，你只需找到要链接的相应URL即可。
看起来像这样的网址模板有效：
"http://map.project-osrm.org/?z=18¢er={lat}%2C{lng}&loc={lat}%2C{lng}&loc={lat}%2C{lng}&hl=en&ly=&alt=&df=&srv="
当然，{lat}和{lng}为十进制度。
它将视图居中坐标，并将起点和终点设置为坐标。看起来您必须指定终点，如果它与起点相同，OSRM地图将自动缩放到最大缩放（18）......
演示：http://jsfiddle.net/ve2huzxw/109/
如果您想在地图中集成路由，而不是重定向到OSRM，您可能会对Leaflet Routing Machine plugin感兴趣。
http://leafletjs.com/plugins.html#routing
上的其他可能插件修改
替换网址模板中的{lat}和{lng}以在弹出式内容中包含正确的链接是微不足道的：
var marker = L.marker(latLng).bindPopup(
"<strong>" + props.name + "</strong><br />" +
props.address + "<br />" +
(props.description ? props.description : "") +
"GPS: " + feature.geometry.coordinates + "<br /><br />" +
"<a href='http://map.project-osrm.org/?z=18¢er=" + lat + "%2C" + lng +
"&loc=" + lat + "%2C" + lng +
"&loc=" + lat + "%2C" + lng +
"&hl=en&ly=&alt=&df=&srv=' target='_blank'>Get directions from this point</a>");
更新了演示：http://jsfiddle.net/ve2huzxw/110/
或使用L.Util.template：
var marker = L.marker(latLng).bindPopup(
"<strong>" + props.name + "</strong><br />" +
props.address + "<br />" +
(props.description ? props.description : "") +
"GPS: " + feature.geometry.coordinates + "<br /><br />" +
L.Util.template("<a href='http://map.project-osrm.org/?z=18¢er={lat}%2C{lng}&loc={lat}%2C{lng}&loc={lat}%2C{lng}&hl=en&ly=&alt=&df=&srv=' target='_blank'>Get directions from this point</a>", {
lat: lat,
lng: lng
}));
更新了演示：http://jsfiddle.net/ve2huzxw/111/
编辑2：
如果我理解正确，您可以在interaction函数中绑定弹出窗口。所以这就是应该添加OSRM链接的地方。
坐标在feature.geometry.coordinates中可用作数组，其中项目0是经度，项目1是纬度（根据GeoJSON规范的要求）。
function interaction(feature, layer) {
var props = feature.properties,
coords = feature.geometry.coordinates;
var popupContent = "<strong>" +
props.name + "</strong><br />" + props.address + "<br />";
if (props.description) {
popupContent += props.description;
}
// You already access the coordinates, what is the extra difficulty to use them in the OSRM link?
popupContent += 'GPS: ' + feature.geometry.coordinates + "<br /><br />" +
L.Util.template("<a href='http://map.project-osrm.org/?z=18¢er={lat}%2C{lng}&loc={lat}%2C{lng}&loc={lat}%2C{lng}&hl=en&ly=&alt=&df=&srv=' target='_blank'>Get directions from this point</a>", {
lat: coords[1],
lng: coords[0]
});
layer.bindPopup(popupContent, { // You can bind the popup right away, and it will automatically open when user clicks on the marker icon.
maxWidth: 320
});
// In your initial code, you bind the popup only after first click on marker, so you need 2 clicks to open the popup!
};
更新了Plunker：http://plnkr.co/edit/McR01O2u8eE7gPZ8qXpI?p=info
注意：