openstreetmap：Webページにマップを埋め込む（Googleマップなど）

OpenStreetMapをページに埋め込む/マッシュアップする方法はありますか（Google Maps APIのように）？

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

検索すると、未加工の地図データにアクセスするためのAPIが表示されますが、それは地図の編集に適しているようです。それに加えて、それを扱うことはAJAXにとって大変な仕事です。

マップを表示するには、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

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

リーフレットのクイックスタートガイドがあります。マーカーなどの基本的な機能に加えて、プラグインを使用すると、外部サービスを使用したルーティングもサポートされます。

シンプルなマップの場合、IMHOの設定はOpenLayersよりも簡単で高速ですが、完全に構成可能であり、より複雑な用途に合わせて調整できます。

シンプルなOSMスリッピーマップのデモ/例

「コードスニペットの実行」をクリックして、マーカーが埋め込まれたOpenStreetMap埋め込みマップスリッピーマップを表示します。これはリーフレットで作成されました。

コード

// Where you want to render the map.
var element = document.getElementById('osm-map');

// Height has to be set. You can do this in CSS too.
element.style = 'height:300px;';

// Create Leaflet map on map element.
var map = L.map(element);

// Add OSM tile leayer to the Leaflet map.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Target's GPS coordinates.
var target = L.latLng('47.50737', '19.04611');

// Set map's center to target with zoom 14.
map.setView(target, 14);

// Place a marker on the same location.
L.marker(target).addTo(map);

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

スペック

• OpenStreetMapsを使用します。
• マップをターゲットGPSの中心に配置します。
• ターゲットGPSにマーカーを配置します。
• 依存関係としてリーフレットのみを使用します。

注意：

ここではリーフレットのCDNバージョンを使用しましたが、ファイルをダウンロードして、自分のホストから提供したり含めたりすることができます。

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

CloudMadeの開発者ツールも見てみます。彼らは、美しくスタイル付けされたOSMベースマップサービス、OpenLayersプラグイン、そして独自の軽量で非常に高速なJavaScriptマッピングクライアントさえ提供します。また、可能な要件として説明した独自のルーティングサービスもホストします。彼らは素晴らしいドキュメントと例を持っています。

OpenLayers（マップ用のjs API）を使用できます。

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

編集：OpenLayersサンプルへの新しいリンク

OSMマップをWebページに埋め込むだけの場合、最も簡単な方法は、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「Deploying your own Slippy Map」を参照してください。

Javascriptを恐れるなら、簡単な方法があります...私はまだ学習中です。Open Streetは、カスタマイズ可能なシンプルなWordpressプラグインを作成します。OSM Widgetプラグインを追加します。

これは、国勢調査局のTIGER行ファイルのカバーを使用してPython Javaの概念を理解するまでは、フィラーになります。