-1

我使用传单 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});
}
    })
}

如何编写一些代码来添加“获取路线”链接并使用标记坐标打开 OSRM 路由器或 Googlemap？我不是开发人员，所以我不知道是否可以使用 this.feature.geometry.coordinates

任何提示或我可以在哪里寻找解释？

4

1 回答 1

0

如果您想使用 OSRM 打开一个新页面，以地图为中心并以起点作为标记坐标，您只需要找到要链接到的适当 URL。

它看起来像这样的 URL 模板：

"http://map.project-osrm.org/?z=18&center={lat}%2C{lng}&loc={lat}%2C{lng}&loc={lat}%2C{lng}&hl=en&ly=&alt=&df=&srv="

当然是十进制{lat}度。{lng}

它将以您的坐标为中心，并将起点和终点设置为这些坐标。看来你要指定终点，如果和起点相同，OSRM地图会自动缩放到最大缩放（18）……</p>

演示：http: //jsfiddle.net/ve2huzxw/109/

如果您想在地图中集成路由，而不是重定向到 OSRM，您可能会对Leaflet Routing Machine 插件感兴趣。

http://leafletjs.com/plugins.html#routing上的其他可能插件

编辑：

替换 URL 模板中的{lat}and{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&center=" + 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&center={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&center={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

笔记：

  • 在您的初始代码中，您在单击图层时绑定弹出窗口，即用户需要在标记图标上单击一次以触发绑定，并再次单击以打开弹出窗口……为什么不立即绑定弹出窗口？它将准备好在用户第一次单击时打开。
  • 您应该查看如何存储数据（在地图数据文件中）以及如何将其转换为叠加层。这将使您免于数十次代码复制粘贴，并提高您网站的可维护性。
  • 不要忘记在地图的角落正确注明 OpenStreetMap！
于 2016-01-04T14:10:35.053 回答