OpenStreetMap: تضمين الخريطة في صفحة الويب (مثل خرائط جوجل)

Question

هل هناك طريقة لتضمين / mashup OpenStreetMap في صفحتك (مثل الطريق خرائط جوجل API. يعمل)؟

أحتاج إلى إظهار خريطة داخل صفحتي مع بعض العلامات والسماح بسحب / التكبير حولها، ربما التوجيه. أظن أن هناك بعض api جافا سكريبت لهذا الغرض، لكنني لا يبدو لي أن أجدها.

البحث يحصل لي API للوصول إلى بيانات الخريطة الخام, ، ولكن يبدو أنه أكثر لتحرير الخريطة؛ الى جانب ذلك، العمل مع ذلك سيكون مهمة ثقيلة لأجاكس.

Answer 1

تحتاج إلى استخدام بعض الأشياء 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.

Answer 2

هناك الآن أيضا منشور, ، والتي تم بناؤها مع الأجهزة المحمولة في الاعتبار.

هناك دليل البدء السريع للنشرة. إلى جانب الميزات الأساسية مثل العلامات، مع الإضافات التي يدعمها أيضا التوجيه باستخدام خدمة خارجية.

للحصول على خريطة بسيطة، يكون IMHO أسهل وأسرع لإعداد أكثر من OpenLayers، ولكنه قابل للتكوين بالكامل والتشغيل اللاتيني مقابل استخدامات أكثر تعقيدا.

Answer 3

خريطة بسيطة OSM Slippy Demo / مثال

انقر فوق "مقتطف رمز الركز" لرؤية خريطة Slippy APSENTREETMAP مدمجة مع علامة عليه. تم إنشاء هذا مع منشور.

رمز

// 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.0.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

المواصفات

• يستخدم OpenStreetMaps.
• مراكز الخريطة إلى GPS المستهدف.
• يضع علامة على GPS المستهدف.

ملحوظة:

لقد استخدمت نسخة CDN من منشور هنا، ولكن يمكنك تحميل الملفات حتى تتمكن من الخدمة وتضمينها من المضيف الخاص بك.

Answer 4

إلقاء نظرة على mabrestraction.. وبعد هذا يمكن أن يوفر لك المزيد من المرونة لتوفير الخرائط بناء على Google، OSM، Yahoo، إلخ ومع ذلك لن يتعين تغيير الكود الخاص بك.

Answer 5

أود أيضا إلقاء نظرة على أدوات المطور في CloudMade. وبعد أنها توفر خدمة خريطة OSM الأساسية بشكل جميل، ومكون إضافي، وحتى عميل رسم الخرائط الضوئي الخاص به، وعميل تعيين جافا سكريبت سريع للغاية. كما يستضيفون خدمة التوجيه الخاصة بهم، والتي ذكرتها بمثابة متطلبات محتملة. لديهم وثائق رائعة وأمثلة.

Answer 6

يمكنك استخدام OpenLayers (JS API للخرائط).

هناك مثال على صفحتهم تظهر كيفية تضمين بلاط OSM.

Answer 7

إذا كنت ترغب فقط في تضمين خريطة 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 Wiki "نشر خريطة Slippy الخاصة بك".

Answer 8

هناك طريقة بسيطة للقيام بذلك إذا كنت تخشى جافا سكريبت ... ما زلت أتعلم. فتح الشارع يجعل البرنامج المساعد WordPress بسيط يمكنك تخصيصه. إضافة البرنامج المساعد OSM القطعة.

سيكون هذا حشما حتى أعرف إخبأتي بيثون جافا باستخدام ملفات خط النمر الأسري من مكتب التعداد.