ओपनस्ट्रीटमैप: वेबपेज में मैपिंग एम्बेड करना (जैसे गूगल मैप्स)

Question

क्या आपके पेज में OpenStreetMap को एम्बेड करने / मैशअप करने का एक तरीका है (जैसे Google मैप्स एपीआई काम करता है)?

मुझे कुछ मार्करों के साथ अपने पृष्ठ के अंदर एक नक्शा दिखाने की आवश्यकता है और शायद रूटिंग के आसपास / ज़ूमिंग को घसीटने की अनुमति है। मुझे संदेह है कि इसके लिए कुछ जावास्क्रिप्ट एपीआई होगा, लेकिन मैं इसे ढूंढ नहीं सकता।

खोज मुझे कच्चे मानचित्र डेटा तक पहुंच के लिए एक एपीआई मिलता है , लेकिन यह मानचित्र संपादन के लिए अधिक लगता है; इसके अलावा, उस के साथ काम करना AJAX के लिए एक भारी काम होगा।

Answer 1

अपना नक्शा दिखाने के लिए आपको कुछ जावास्क्रिप्ट सामानों का उपयोग करना होगा। 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

Answer 2

अब कैटलॉग भी है , जिसे मोबाइल उपकरणों को ध्यान में रखकर बनाया गया है।

वहाँ एक है त्वरित आरंभ गाइड पत्रक के लिए। मार्कर जैसे बुनियादी सुविधाओं के अलावा, प्लगइन्स के साथ यह बाहरी सेवा का उपयोग करके रूटिंग का भी समर्थन करता है ।

सरल मानचित्र के लिए, यह ओपनहोयर की तुलना में IMHO आसान और तेज़ है, फिर भी अन्य जटिल उपयोगों के लिए पूरी तरह से विन्यास और tweakable है।

Answer 3

सरल 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 का उपयोग करता है।
• मैप को लक्ष्य जीपीएस पर केंद्रित करता है।
• लक्ष्य जीपीएस पर एक मार्कर रखता है।
• केवल एक निर्भरता के रूप में USC का उपयोग करता है।

ध्यान दें:

मैं की CDN संस्करण इस्तेमाल किया पत्रक यहाँ है, लेकिन आप कर सकते हैं डाउनलोड फ़ाइलों ताकि आप की सेवा और उन्हें अपने खुद मेजबान से शामिल कर सकते हैं।

Comments

मैंने एक जावास्क्रिप्ट फ़ंक्शन में आपके कोड का उपयोग किया है, और यह एक आकर्षण की तरह काम करता है। लेकिन फिर से, उस फ़ंक्शन को ट्रिगर करना, आसम मैप को बढ़ाता है और सब कुछ नष्ट कर देता है। कोई भी समाधान ?

— 0x48piraj

@ 0x48piraj कृपया समस्या प्रदर्शित करने के लिए एक jsfiddle बनाएं , या इससे भी बेहतर: अपने कोड के साथ एक नया प्रश्न पूछें जो कि गलत दिखाता है।

— टोटमेडली

ये सुन्दर है। आपका बहुत बहुत धन्यवाद! एक सवाल हालांकि: var target = L.latLng()आप स्पष्ट रूप से निर्देशांक को परिभाषित करते हैं। यह दिखाने का कोई भी मौका कैसे मामले को लागू करने के लिए जहां कई डॉट्स के लिए निर्देशांक JSON संरचना के अंदर संग्रहीत किए जाते हैं? धन्यवाद!

— लुकास ऐमेराटो जू

इसका उपयोग केवल उस दृश्य के लिए किया जाता है जहां मानचित्र का केंद्र स्थित होना चाहिए। आप L.marker(target).addTo(map);अपनी संरचना में जस्ट लूप के साथ मार्कर जोड़ते हैं और L.latLng()जितनी आवश्यकता हो उतने एस बनाते हैं और उन को पास करते हैं L.marker()।

— टोटमेडली 22

Answer 4

मैपस्ट्रेक पर एक नज़र डालें । यह आपको Google, osm, yahoo, आदि के आधार पर मैप प्रदान करने के लिए अधिक लचीलापन दे सकता है, हालाँकि आपके कोड को बदलना नहीं होगा।

Comments

उनकी वेबसाइट डाउन होने लगती है।

— maddrag0n

यह काम करता है, लेकिन केवल "www" उपडोमेन के बिना: mapstraction.com .. वास्तव में जो मैंने खोजा, उसके लिए धन्यवाद!

— दाविद

Mapstraction लगभग 10 वर्षों से बरकरार नहीं है :)

— जूलियन एफ। वेनर्ट

Answer 5

मैं CloudMade के डेवलपर टूल पर भी नज़र डालूंगा । वे एक खूबसूरती से स्टाइल किए गए OSM बेस मैप सेवा, एक OpenLayers प्लगइन और यहां तक ​​कि अपने स्वयं के हल्के वजन, बहुत तेजी से जावास्क्रिप्ट मैपिंग क्लाइंट प्रदान करते हैं। वे अपनी स्वयं की रूटिंग सेवा की मेजबानी भी करते हैं, जिसका आपने संभावित आवश्यकता के रूप में उल्लेख किया है। उनके पास महान दस्तावेज और उदाहरण हैं।

Answer 6

आप OpenLayers (नक्शे के लिए js API) का उपयोग कर सकते हैं।

उनके पृष्ठ पर एक उदाहरण है जो दिखा रहा है कि ओएसएम टाइल्स को कैसे एम्बेड किया जाए।

संपादित करें: OpenLayers उदाहरणों के लिए नया लिंक

Comments

यही मैं ढूंढ रहा था, बहुत बहुत धन्यवाद। मैं केवल एक उत्तर को स्वीकार कर सकता हूं, इसलिए यह अधिक विस्तृत एक पर जाता है।

— पिस्कोवर ने

लिंक मर चुका है।

— तात्यामेली

Answer 7

यदि आप किसी OSM मानचित्र को वेबपृष्ठ पर एम्बेड करना चाहते हैं, तो सबसे आसान तरीका यह है कि आप OSM वेबसाइट से सीधे iframe कोड प्राप्त करें:

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 विकी को " अपने खुद के स्लिपी मैप को नियुक्त करना " देखें।

Answer 8

यदि आप जावास्क्रिप्ट से डरते हैं, तो इसे करने का सरल तरीका है ... मैं अभी भी सीख रहा हूं। ओपन स्ट्रीट एक सरल वर्डप्रेस प्लगइन बनाती है जिसे आप कस्टमाइज़ कर सकते हैं। OSM विजेट प्लगइन जोड़ें।

यह एक भराव होगा, जब तक कि मैं जनगणना ब्यूरो से कवर टायगर लाइन फ़ाइलों का उपयोग करके अपने पायथन जावा संगति का पता नहीं लगाता।

Comments

मुझे, मैं जेएस की तुलना में वर्डप्रेस के बारे में अधिक चिंतित हूं, लेकिन यह राय का विषय है। धन्यवाद :)

— पिस्कॉर ने बिल्डिंग

Btw टाइगर केवल यूएस है।

— पिस्कवर ने