web-dev-qa-db-ja.com

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

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

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

検索すると 未処理の地図データにアクセスするためのAPI が取得されますが、それは地図の編集に向いているようです。それに加えて、それを扱うことはAJAXにとって重いタスクです。

javascriptapimapsopenstreetmap
76
Piskvor

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

58
lhahne

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

リーフレットには クイックスタートガイド があります。マーカーなどの基本的な機能に加えて、プラグインでは、外部サービスの使用 routing もサポートします。

シンプルなマップの場合、OpenLayersよりもセットアップが簡単で高速ですが、より複雑な用途向けに完全に構​​成および調整が可能です。

29
Piskvor

シンプルな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/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

スペック

  • OpenStreetMapsを使用します。
  • マップをターゲットGPSの中央に配置します。
  • ターゲットGPSにマーカーを配置します。

注：

ここではCDNバージョンの Leaflet を使用しましたが、 download を使用して、自分のホストからファイルを提供およびインクルードできます。

15
totymedli

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

6
Alan

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

5
atogle

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

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

3
diciu

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 " 独自のSlippy Mapをデプロイする "をご覧ください。

2
krubo

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

これは、国勢調査局のカバーTIGER行ファイルを使用してPython Java.

0
David Spahn