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

99

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.

javascript api maps openstreetmap Piskvor meninggalkan gedung
sumber

Jawaban:

32

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.

Piskvor
sumber
26

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

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.

totymedli
sumber
Saya menggunakan kode Anda dalam fungsi javascript, dan berfungsi seperti pesona. Tapi sekali lagi, memicu fungsi itu, memperbesar peta osm dan menghancurkan segalanya. Ada solusi?
0x48piraj
2
@ 0x48piraj Harap buat jsfiddle untuk mendemonstrasikan masalah, atau bahkan lebih baik: ajukan pertanyaan baru dengan kode Anda yang menunjukkan apa yang salah.
totymedli
Ini indah. Terima kasih banyak! Satu pertanyaan: var target = L.latLng()Anda jelas menentukan koordinatnya. Adakah peluang untuk menunjukkan cara mengimplementasikan kasus di mana koordinat untuk beberapa titik disimpan di dalam struktur JSON? Terima kasih!
Lucas Aimaretto
1
Itu hanya digunakan untuk tampilan di mana pusat peta harus ditempatkan. Anda menambahkan penanda dengan L.marker(target).addTo(map);Just loop struktur Anda dan membuat sebanyak yang L.latLng()Anda butuhkan dan meneruskannya L.marker().
totymedli
6

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

Alan
sumber
situs web mereka sepertinya tidak aktif.
maddrag0n
1
Ia bekerja, tetapi hanya tanpa "www" Subdomain: mapstraction.com .. persis seperti yang saya cari, terima kasih untuk itu!
david
mapstraction tidak dipertahankan selama hampir 10 tahun sekarang :)
Julian F. Weinert
5

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.

atogle
sumber
4

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

diciu
sumber
Itulah yang saya cari, terima kasih banyak. Saya hanya bisa menerima satu jawaban, jadi itu masuk ke yang lebih rinci.
Piskvor meninggalkan gedung
3
Tautannya sudah mati.
totymedli
2

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

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

krubo
sumber
0

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.

David Spahn
sumber
Saya, saya jauh lebih khawatir tentang Wordpress daripada JS, tapi itu masalah opini. Terima kasih :)
Piskvor meninggalkan gedung
Btw TIGER hanya untuk AS.
Piskvor meninggalkan gedung