Openstreetmap: menyematkan peta di halaman web (seperti Google Maps)

Apakah ada cara untuk menyematkan / memadukan OpenStreetMap di halaman Anda (seperti cara kerja Google Maps API )?

Saya perlu menunjukkan peta di dalam halaman saya dengan beberapa penanda dan memungkinkan menyeret / memperbesar, mungkin perutean. Saya menduga akan ada beberapa API Javascript untuk ini, tetapi saya tidak dapat menemukannya.

Pencarian memberi saya API untuk akses ke data peta mentah , tetapi tampaknya lebih untuk mengedit peta; Selain itu, mengerjakannya akan menjadi tugas berat bagi AJAX.

Anda perlu menggunakan beberapa hal JavaScript untuk menampilkan peta Anda. OpenLayers adalah pilihan nomor satu untuk ini.

Ada contoh di http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example dan sesuatu yang lebih canggih di

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

dan

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

Sekarang ada juga Leaflet , yang dibuat dengan mempertimbangkan perangkat seluler.

Ada Panduan Memulai Cepat untuk leaflet. Selain fitur dasar seperti penanda, dengan plugin, ia juga mendukung perutean menggunakan layanan eksternal.

Untuk peta sederhana, IMHO lebih mudah dan lebih cepat untuk diatur daripada OpenLayers, namun sepenuhnya dapat dikonfigurasi dan di-tweak untuk penggunaan yang lebih kompleks.

Demo / Contoh Peta Slippy OSM Sederhana

Klik "Jalankan cuplikan kode" untuk melihat peta slippy OpenStreetMap yang disematkan dengan penanda di atasnya. Ini dibuat dengan Leaflet .

Kode

// 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>

Spesifikasi

• Menggunakan OpenStreetMaps.
• Pusatkan peta ke GPS target.
• Menempatkan penanda di GPS target.
• Hanya menggunakan Leaflet sebagai dependensi.

catatan:

Saya menggunakan Leaflet versi CDN di sini, tetapi Anda dapat mengunduh file sehingga Anda dapat menyajikan dan memasukkannya dari host Anda sendiri.

Lihatlah petastraksi . Ini dapat memberi Anda lebih banyak fleksibilitas untuk menyediakan peta berdasarkan google, osm, yahoo, dll. Namun kode Anda tidak perlu berubah.

Saya juga akan melihat alat pengembang CloudMade . Mereka menawarkan layanan peta dasar OSM yang ditata indah, plugin OpenLayers, dan bahkan klien pemetaan JavaScript mereka sendiri yang ringan dan sangat cepat. Mereka juga menghosting layanan perutean mereka sendiri, yang Anda sebutkan sebagai persyaratan yang mungkin. Mereka memiliki dokumentasi dan contoh yang bagus.

Anda dapat menggunakan OpenLayers (js API untuk peta).

Ada contoh di halaman mereka yang menunjukkan cara menyematkan ubin OSM.

Edit: Link Baru ke contoh OpenLayers

Jika Anda hanya ingin menyematkan peta OSM di halaman web, cara termudah adalah mendapatkan kode iframe langsung dari situs web OSM:

1. Arahkan ke peta yang Anda inginkan di https://www.openstreetmap.org
2. Di sisi kanan, klik ikon "Bagikan", lalu klik "HTML"
3. Salin kode iframe yang dihasilkan langsung ke halaman web Anda. Ini akan terlihat seperti ini:

<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>

Jika Anda ingin melakukan sesuatu yang lebih rumit, lihat wiki OSM " Menyebarkan Peta Slippy Anda sendiri ".

Ada cara sederhana untuk melakukannya jika Anda takut Javascript ... Saya masih belajar. Open Street membuat plugin Wordpress sederhana yang dapat Anda sesuaikan. Tambahkan plugin OSM Widget.

Ini akan menjadi pengisi sampai saya mengetahui kesimpulan Python Java saya menggunakan file baris TIGER coverter dari Biro Sensus.