109

あなたのページに OpenStreetMap を埋め込む/マッシュアップする方法はありますか ( Google Maps APIの仕組みのように)?

いくつかのマーカーを使用してページ内にマップを表示し、ドラッグ/ズーム、おそらくルーティングを許可する必要があります。このための Javascript API があると思われますが、見つけられないようです。

検索すると、未加工の地図データにアクセスするための APIが得られますが、それは地図の編集用のようです。さらに、それを扱うのは AJAX にとっては大変な作業です。

4

9 に答える 9

79

マップを表示するには、いくつかの JavaScript を使用する必要があります。OpenLayers は、このための一番の選択肢です。

http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Exampleに例があり、より高度な例が にあります

http://wiki.openstreetmap.org/wiki/OpenLayers_Marker

と

http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

于 2009-05-29T09:33:46.420 に答える
39

また、モバイル デバイスを念頭に置いて構築されたLeafletもあります。

リーフレットのクイック スタート ガイドがあります。マーカーなどの基本機能に加え、プラグインにより外部サービスを利用したルーティングにも対応。

単純なマップの場合、OpenLayers よりもセットアップが簡単で高速ですが、より複雑な用途に合わせて完全に構成および調整できます。

于 2014-04-28T07:19:56.010 に答える
7

Web ページに OSM マップを埋め込むだけの場合、最も簡単な方法は、OSM Web サイトから iframe コードを直接取得することです。

  1. https://www.openstreetmap.orgで目的のマップに移動します
  2. 右側にある [共有] アイコンをクリックし、[HTML] をクリックします。
  3. 生成された iframe コードを Web ページに直接コピーします。次のようになります。

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&amp;layer=mapnik" 
style="border: 1px solid black"></iframe>
<br/><small><a href="https://www.openstreetmap.org/#map=12/17.0759/-61.8260">View Larger Map</a></small>

もっと手の込んだことをしたい場合は、OSM wiki の「独自の Slippy Map を展開する」を参照してください。

于 2018-11-28T23:07:48.740 に答える
6

maptractionを見てください。これにより、Google、osm、yahoo などに基づくマップを提供する柔軟性が高まりますが、コードを変更する必要はありません。

于 2009-06-18T22:20:55.730 に答える
5

OpenLayers (マップ用の js API) を使用できます。

彼らのページには、OSM タイルを埋め込む方法を示す例があります。

編集: OpenLayers の例への新しいリンク

于 2009-05-29T09:30:29.607 に答える
5

また、 CloudMade の開発者ツールも検討します。彼らは、美しいスタイルの OSM ベース マップ サービス、OpenLayers プラグイン、さらには独自の軽量で非常に高速な JavaScript マッピング クライアントを提供しています。また、可能な要件として言及した独自のルーティング サービスもホストします。優れたドキュメントと例があります。

于 2009-06-10T14:02:48.153 に答える
0

Javascript が苦手な方のために、簡単な方法があります...私はまだ学んでいます。Open Street は、カスタマイズ可能なシンプルな Wordpress プラグインを作成します。OSM ウィジェット プラグインを追加します。

これは、国勢調査局のカバーター TIGER ライン ファイルを使用して Python Java の組み合わせを理解するまでのフィラーです。

于 2018-09-09T16:21:14.967 に答える