Openstreetmap: web sayfasına harita yerleştirme (Google Haritalar gibi)

Sayfanıza OpenStreetMap'i katıştırmanın / karıştırmanın bir yolu var mı ( Google Haritalar API'sinin çalışma şekli gibi)?

Sayfamın içinde bazı işaretçilerle bir harita göstermem ve etrafta sürüklemeye / yakınlaştırmaya, belki de yönlendirmeye izin vermem gerekiyor. Bunun için bir Javascript API olacağından şüpheleniyorum, ancak bulamıyorum.

Arama, ham harita verilerine erişim için bana bir API sağlıyor , ancak bu daha çok harita düzenleme için görünüyor; ayrıca bununla çalışmak AJAX için ağır bir görev olurdu.

Haritanızı göstermek için bazı JavaScript öğeleri kullanmanız gerekir. OpenLayers bunun için bir numaralı seçimdir.

Http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example adresinde bir örnek ve şu adreste daha gelişmiş bir şey var:

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

ve

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

Artık mobil cihazlar göz önünde bulundurularak oluşturulmuş Leaflet de var .

Broşür için bir Hızlı Başlangıç ​​Kılavuzu var . İşaretçiler gibi temel özelliklerin yanı sıra, eklentilerle harici bir hizmet kullanarak yönlendirmeyi de destekler .

Basit bir harita için, IMHO'nun kurulumu OpenLayers'a göre daha kolay ve daha hızlıdır, ancak daha karmaşık kullanımlar için tamamen yapılandırılabilir ve değiştirilebilir.

Basit OSM Slippy Map Demosu / Örneği

Üzerinde bir işaretleyici bulunan gömülü bir OpenStreetMap kayan haritasını görmek için "Kod parçacığını çalıştır" ı tıklayın. Bu, Leaflet ile oluşturulmuştur .

Kod

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

Özellikler

• OpenStreetMaps kullanır.
• Haritayı hedef GPS'ye ortalar.
• Hedef GPS üzerine bir işaretçi yerleştirir.
• Broşürü yalnızca bağımlılık olarak kullanır.

Not:

Ben CDN versiyonunu kullanılan el broşürü burada, ama sen yapabilirsiniz indirmek size hizmet etmek ve kendi ana bilgisayardan dahil edebilirsiniz, böylece dosyaları.

Harita soyutlamasına bir göz atın . Bu size google, osm, yahoo, vb. Tabanlı haritalar sağlamak için daha fazla esneklik sağlayabilir ancak kodunuzun değişmesi gerekmez.

CloudMade'in geliştirici araçlarına da bir göz atardım . Güzel bir şekilde tasarlanmış OSM temel harita hizmeti, bir OpenLayers eklentisi ve hatta kendi hafif, çok hızlı JavaScript haritalama istemcisi sunarlar. Ayrıca olası bir gereksinim olarak bahsettiğiniz kendi yönlendirme hizmetlerini de barındırırlar. Harika belgeleri ve örnekleri var.

OpenLayers'ı (haritalar için js API) kullanabilirsiniz.

Sayfalarında OSM döşemelerinin nasıl gömüleceğini gösteren bir örnek var.

Düzenleme: OpenLayers örneklerine Yeni Bağlantı

Bir OSM haritasını bir web sayfasına gömmek istiyorsanız, en kolay yol, iframe kodunu doğrudan OSM web sitesinden almaktır:

1. Https://www.openstreetmap.org adresinde istediğiniz haritaya gidin
2. Sağ tarafta, "Paylaş" simgesini ve ardından "HTML" yi tıklayın
3. Elde edilen iframe kodunu doğrudan web sayfanıza kopyalayın. Şöyle görünmeli:

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

Daha ayrıntılı bir şey yapmak istiyorsanız, OSM wiki " Kendi Kaygan Haritanızı Dağıtma " bölümüne bakın .

Javascript'ten korkuyorsanız bunu yapmanın basit bir yolu var ... Hala öğreniyorum. Open Street, özelleştirebileceğiniz basit bir Wordpress eklentisi yapar. OSM Widget eklentisi ekleyin.

Bu, Nüfus Sayım Bürosu'ndaki TIGER satır dosyalarını kullanarak Python Java karışımımı bulana kadar bir dolgu olacak.