Home HTML CSS Chuyển từ Google Maps sang OpenStreetMap

Chuyển từ Google Maps sang OpenStreetMap

0
Chuyển từ Google Maps sang OpenStreetMap

Như bạn có thể nhận thấy, API Google Maps bắt đầu được trả tiền vào ngày 16 tháng 7 năm 2018. Không có gì sai cả, chúng ta đang trả tiền cho tất cả các tính năng được nhóm Google phát triển. Nhưng nếu bạn là chủ sở hữu của trang web đơn giản và bạn chỉ muốn hiển thị một phần bản đồ với vị trí văn phòng của bạn? Bạn có thể sử dụng OpenStreetMap .

Có dễ dàng không?

Bên dưới, bạn có thể thấy toàn bộ mã được yêu cầu để tạo bản đồ, định vị mã, đặt điểm đánh dấu và tạo cửa sổ bật lên có địa chỉ văn phòng.

Chúng ta đã làm gì?

Chúng tôi đã sử dụng thư viện Leaflet để xử lý việc hiển thị bản đồ. Trong ví dụ trên, trong phần đầu, tôi đã sử dụng phiên bản được lưu trữ của tệp CSS và JS, nhưng bạn có thể tải xuống nó trên máy chủ của mình và lưu trữ cục bộ. Trong phần nội dung, bạn có thể thấy phần tử div của id “mapDiv” được định cấu hình rộng 800 pixel và cao 500 pixel.

Phần còn lại của ma thuật chỉ đơn giản là được đặt trong kịch bản. Lúc đầu, chúng tôi đang thiết lập vĩ độ và kinh độ của điểm chúng tôi muốn đặt điểm đánh dấu trên (và đây cũng sẽ là trung tâm của bản đồ của chúng tôi). Tiếp theo, chúng tôi sẽ tạo bản đồ, sẽ được đặt trong phần tử “mapDiv” của chúng tôi, tập trung vào vị trí chúng tôi đã chọn và thu phóng đến cấp 13. Bạn có thể thay đổi mức thu phóng để phù hợp hơn với nhu cầu của mình.

Điều quan trọng là cấu hình nguồn bản đồ. Có nhiều nguồn bản đồ khác nhau mà bạn có thể sử dụng, nhưng trong ví dụ này, tôi muốn giữ mọi thứ thẳng nên tôi chỉ cần định cấu hình các ô OpenStreetMap làm nguồn. Xin lưu ý rằng bạn phải giữ thông tin bản quyền trong trường hợp này.

Chúng tôi gần như hoàn thành. Bây giờ chúng ta có thể đặt điểm đánh dấu trên bản đồ (trên vĩ độ và kinh độ được cấu hình trước đó). Bước cuối cùng, chúng tôi đang đặt cửa sổ bật lên với thông tin về công ty của chúng tôi.

Đây có thực sự là tất cả những gì tôi cần không?

Đây là cách sử dụng cơ bản của Leaflet với OpenStreetMap. Tuy nhiên, thư viện Leaflet mạnh hơn rất nhiều. Bạn có thể vẽ trên bản đồ, đặt các vật thể khác nhau, phản ứng với các sự kiện – bạn sẽ tìm thấy nhiều thông tin hơn trong tài liệu của Leaflet .

Vị trí địa lý

Thư viện Leaflet không chứa bất kỳ chức năng nào để thực hiện định vị địa lý dựa trên chuỗi địa chỉ. Nếu bạn muốn thực hiện các hoạt động như vậy, bạn nên xem API OpenStreetMap Nominatim . Nó cho phép bạn tìm kiếm bằng cách sử dụng các địa điểm được đặt tên (theo tên đường phố, thành phố, v.v.) và không được đặt tên các địa điểm như cửa hàng, quán rượu, v.v.

Một bản đồ tĩnh thay thế

Ngoài ra còn có một đề cập khác đáng nói đến. Nếu bạn không muốn xử lý mã JavaScript và thư viện, bạn có thể chỉ cần sử dụng bản đồ tĩnh được hiển thị dưới dạng hình ảnh trên trang web của mình. Có sẵn trình tạo bản đồ tĩnh đẹp .

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.