Openstreetmap: การฝังแผนที่ในหน้าเว็บ (เช่น Google Maps)

มีวิธีฝัง / แมชอัป 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 Slippy Map อย่างง่าย / ตัวอย่าง

คลิกที่ "Run code snippet" เพื่อดูแผนที่ Slippy ของ 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 เป้าหมาย
• ใช้ Leaflet เป็นการอ้างอิงเท่านั้น

บันทึก:

ฉันใช้Leafletเวอร์ชัน CDN ที่นี่ แต่คุณสามารถดาวน์โหลดไฟล์เพื่อให้คุณสามารถใช้งานและรวมไฟล์เหล่านี้จากโฮสต์ของคุณเองได้

ลองดูที่Mapstraction สิ่งนี้ช่วยให้คุณมีความยืดหยุ่นมากขึ้นในการจัดหาแผนที่ตาม google, osm, yahoo และอื่น ๆ แต่โค้ดของคุณจะไม่ต้องเปลี่ยน

ฉันจะดูเครื่องมือสำหรับนักพัฒนาของ CloudMadeด้วย พวกเขานำเสนอบริการแผนที่ฐาน OSM ที่มีสไตล์สวยงามปลั๊กอิน OpenLayers และแม้แต่ไคลเอนต์การทำแผนที่ JavaScript ที่มีน้ำหนักเบาและรวดเร็วมาก นอกจากนี้ยังโฮสต์บริการเส้นทางของตนเองซึ่งคุณกล่าวถึงว่าเป็นข้อกำหนดที่เป็นไปได้ พวกเขามีเอกสารและตัวอย่างที่ดี

คุณสามารถใช้ OpenLayers (js API สำหรับแผนที่)

มีตัวอย่างในหน้าซึ่งแสดงวิธีการฝังไทล์ OSM

แก้ไข: ตัวอย่างลิงก์ใหม่ไปยัง OpenLayers

หากคุณแค่ต้องการฝังแผนที่ OSM บนหน้าเว็บวิธีที่ง่ายที่สุดคือรับโค้ด iframe โดยตรงจากเว็บไซต์ OSM:

1. ไปที่แผนที่ที่คุณต้องการบนhttps://www.openstreetmap.org
2. ทางด้านขวาให้คลิกไอคอน "แชร์" จากนั้นคลิก "HTML"
3. คัดลอกโค้ด iframe ที่เป็นผลลัพธ์ลงในหน้าเว็บของคุณโดยตรง ควรมีลักษณะดังนี้:

<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 " การปรับใช้แผนที่ลื่นของคุณเอง "

มีวิธีง่ายๆหากคุณกลัว Javascript ... ฉันยังเรียนรู้อยู่ Open Street สร้างปลั๊กอิน Wordpress ง่ายๆที่คุณสามารถปรับแต่งได้ เพิ่มปลั๊กอิน OSM Widget

นี่จะเป็นตัวเติมจนกว่าฉันจะรู้ว่า Python Java concotion ของฉันโดยใช้ไฟล์ไลน์ TIGER จากสำนักสำรวจสำมะโนประชากร