-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 ルーターまたは Google マップを開くコードを作成するにはどうすればよいですか? 私は開発者ではないので、 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}10進法で。

ビューを座標の中心に置き、始点と終点をそれらの座標として設定します。終点を指定する必要があるようで、始点と同じ場合、OSRM マップは自動的に最大ズーム (18) にズームします...</p>

デモ: http://jsfiddle.net/ve2huzxw/109/

OSRM にリダイレクトするのではなく、マップ内にルーティングを統合したい場合は、おそらくLeaflet Routing Machine プラグインに関心があるでしょう。

http://leafletjs.com/plugins.html#routingの他の可能なプラグイン

編集：

URL テンプレートの{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&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!
};

プランカーの更新: http://plnkr.co/edit/McR01O2u8eE7gPZ8qXpI?p=info

ノート：

  • 最初のコードでは、レイヤ クリックでポップアップをバインドします。つまり、ユーザーはマーカー アイコンを 1 回クリックしてバインドをトリガーし、もう一度クリックしてポップアップを開く必要があります。ポップアップをすぐにバインドしないのはなぜですか? ユーザーが最初にクリックしたときに開く準備ができています。
  • データを (mapdata ファイルに) 保存する方法と、それをオーバーレイに変換する方法を確認する必要があります。これにより、何十ものコードをコピーして貼り付ける必要がなくなり、Web サイトの保守性が向上します。
  • 地図の隅に OpenStreetMap のクレジットを適切に記入することを忘れないでください!
于 2016-01-04T14:10:35.053 に答える