Openstreetmap: nhúng bản đồ vào trang web (như Google Maps)

Có cách nào để nhúng / kết hợp OpenStreetMap vào trang của bạn (giống như cách API Google Maps hoạt động) không?

Tôi cần hiển thị bản đồ bên trong trang của mình với một số điểm đánh dấu và cho phép kéo / phóng to xung quanh, có thể định tuyến. Tôi nghi ngờ rằng sẽ có một số API Javascript cho việc này, nhưng dường như tôi không thể tìm thấy nó.

Tìm kiếm giúp tôi có được một API để truy cập vào dữ liệu bản đồ thô , nhưng điều đó dường như dành nhiều hơn cho việc chỉnh sửa bản đồ; ngoài ra, làm việc với điều đó sẽ là một nhiệm vụ nặng nề đối với AJAX.

Bạn cần sử dụng một số công cụ JavaScript để hiển thị bản đồ của mình. OpenLayers là lựa chọn số một cho việc này.

Có một ví dụ tại http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example và một cái gì đó nâng cao hơn tại

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

và

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

Hiện tại còn có Tờ rơi , được xây dựng với các thiết bị di động.

Có một Hướng dẫn Bắt đầu Nhanh cho tờ rơi. Bên cạnh các tính năng cơ bản như điểm đánh dấu, với plugin, nó cũng hỗ trợ định tuyến bằng dịch vụ bên ngoài.

Đối với một bản đồ đơn giản, IMHO được thiết lập dễ dàng và nhanh hơn so với OpenLayers, nhưng vẫn có thể định cấu hình và điều chỉnh đầy đủ cho các mục đích sử dụng phức tạp hơn.

Ví dụ / Demo bản đồ trơn OSM đơn giản

Nhấp vào "Chạy đoạn mã" để xem bản đồ trượt OpenStreetMap được nhúng với một điểm đánh dấu trên đó. Điều này đã được tạo bằng Tờ rơi .

Mã

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

Thông số kỹ thuật

• Sử dụng OpenStreetMaps.
• Căn giữa bản đồ với GPS mục tiêu.
• Đặt một điểm đánh dấu trên GPS mục tiêu.
• Chỉ sử dụng Tờ rơi làm phụ thuộc.

Ghi chú:

Tôi đã sử dụng phiên bản CDN của Tờ rơi ở đây, nhưng bạn có thể tải xuống các tệp để có thể phân phát và bao gồm chúng từ máy chủ lưu trữ của riêng bạn.

Hãy nhìn vào mapstraction . Điều này có thể giúp bạn linh hoạt hơn để cung cấp bản đồ dựa trên google, osm, yahoo, v.v. tuy nhiên mã của bạn sẽ không phải thay đổi.

Tôi cũng sẽ xem xét các công cụ dành cho nhà phát triển của CloudMade . Họ cung cấp dịch vụ bản đồ cơ sở OSM được tạo kiểu đẹp mắt, một plugin OpenLayers và thậm chí cả ứng dụng ánh xạ JavaScript nhẹ, rất nhanh của riêng họ. Họ cũng lưu trữ dịch vụ định tuyến của riêng họ, mà bạn đã đề cập như một yêu cầu có thể. Họ có tài liệu và ví dụ tuyệt vời.

Bạn có thể sử dụng OpenLayers (API js cho bản đồ).

Có một ví dụ trên trang của họ cho thấy cách nhúng các ô OSM.

Chỉnh sửa: Các ví dụ về Liên kết mới đến OpenLayers

Nếu bạn chỉ muốn nhúng bản đồ OSM vào một trang web, cách dễ nhất là lấy mã iframe trực tiếp từ trang web OSM:

1. Điều hướng đến bản đồ bạn muốn trên https://www.openstreetmap.org
2. Ở bên phải, nhấp vào biểu tượng "Chia sẻ", sau đó nhấp vào "HTML"
3. Sao chép mã iframe kết quả trực tiếp vào trang web của bạn. Nó sẽ giống như thế này:

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

Nếu bạn muốn làm điều gì đó phức tạp hơn, hãy xem OSM wiki " Triển khai bản đồ trơn trượt của riêng bạn ".

Có một cách đơn giản để làm điều đó nếu bạn sợ Javascript ... Tôi vẫn đang học. Open Street tạo một plugin Wordpress đơn giản mà bạn có thể tùy chỉnh. Thêm plugin OSM Widget.

Đây sẽ là một phần bổ sung cho đến khi tôi tìm ra cách pha chế Python Java của mình bằng cách sử dụng tệp dòng TIGER che phủ từ Cục điều tra dân số.