Sau khi Google Maps chuyển sang gói định giá trả khi mua cho các API của họ được sử dụng cho các dịch vụ lập bản đồ trên các trang web và ứng dụng, nhiều nhà phát triển và các nền tảng khác sử dụng nó bắt đầu tìm kiếm các dịch vụ thay thế cung cấp các chức năng như Google nhưng với giá rẻ hơn. Vì vậy, đã có Mapbox đến để giải cứu.
Mapbox là một nền tảng cung cấp các dịch vụ lập bản đồ thông qua các API của họ với giá cả rất hợp lý và phần tốt nhất là họ không yêu cầu thông tin thanh toán nếu bạn đang sử dụng cấp miễn phí hào phóng của họ. Vì vậy, các nhà phát triển chỉ muốn thử nghiệm ứng dụng của họ hoặc chưa sẵn sàng trả tiền cho dịch vụ cho đến khi ứng dụng hoặc trang web của họ nhận được lượt truy cập lớn sẽ được cứu khỏi bất kỳ vấn đề thanh toán nào.
Mapbox cung cấp mã đơn giản mà bạn có thể sử dụng để tích hợp bản đồ vào trang web hoặc ứng dụng của mình nhưng tài liệu của chúng khá cồng kềnh. Vì vậy, tôi sẽ cứu bạn khỏi rắc rối bằng cách chia nhỏ nó theo cách đơn giản và dễ dàng để giúp bạn.
Thực tế có hai cách để tích hợp bản đồ –
1. Cách đơn giản nhưng ít kiểm soát
2. Kiểu đơn giản
Vì vậy, tất cả những gì bạn phải làm là sử dụng thẻ iframe để đưa bản đồ vào ứng dụng của mình
Mapbox docs: HTML được trả về bằng phương thức này (iframe) chỉ trả về bản đồ sentayho.com.vn/help/glossary/style/và không hỗ trợ cửa sổ bật lên hoặc các tương tác tính năng khác.
Vì vậy, theo tài liệu về hộp bản đồ, bạn có thể không truy cập được một số tính năng đi kèm với bản đồ. Và đôi khi nó cũng có thể phá vỡ bố cục của bạn như đối với tôi. Hãy tin tôi, tôi rất vui vì tất cả những gì tôi phải làm là bao gồm một khung nội tuyến và đặt một số thuộc tính và thế là xong, nhưng sau đó bố cục bị hỏng và tôi bắt đầu làm việc theo cách của mình và hạ cánh theo “cách đơn giản”. Nhưng nếu iframe phù hợp với bạn thì bạn nên sử dụng và đối với những iframe thì không có ở đây là cách thứ 2 bao gồm bản đồ.
Vì vậy, đối với điều này, chúng tôi sẽ làm việc với Mapbox GL JS là một thư viện JavaScript sử dụng WebGL để hiển thị các bản đồ tương tác từ các ô vectơ (chỉ là một định dạng để lưu trữ dữ liệu bản đồ tức là dữ liệu vectơ không gian địa lý như điểm, đường và đa giác) và các kiểu hộp bản đồ (chỉ là cách bản đồ của bạn sẽ trông, tức là hình thức trực quan của bản đồ).
Đừng sợ bạn không cần phải học một thư viện hoàn toàn mới bây giờ, chỉ cần chịu đựng với tôi ở đây… .. ?
Tất cả những gì bạn cần biết là đối tượng bản đồ về cơ bản xác định bản đồ mà chúng tôi muốn đưa vào, nó chỉ định tất cả các thuộc tính mà bạn muốn bản đồ của mình có và ở mức cơ bản nhất, nó diễn ra như thế này:
let map = new sentayho.com.vn({ container: ‘map’, // container id style: ‘mapbox://styles/harsh-khurana/ck970tots6kk91ik5zxo9i1ng’, // stylesheet location center: [-74.5, 40], // starting position [lng, lat] zoom: 9 // starting zoom });
Bây giờ, tôi sẽ lần lượt xem qua các thuộc tính bản đồ này –
Vùng chứa: Giá trị của nó là phần tử html hoặc id chuỗi nơi chúng tôi sẽ hiển thị bản đồ của mình.
Kiểu: Giá trị của nó chỉ định kiểu bạn muốn bản đồ của mình có. Có chế độ xem phố, tầm nhìn tối và nhiều hơn nữa. Bạn cũng có thể muốn tùy chỉnh phong cách của mình bằng cách sử dụnghttps://studio.mapbox.com/. Nhưng tôi khuyên bạn nên học những cái cơ bản vì chúng đã khá tốt.
Trung tâm: Đây là điểm trung tâm địa lý ban đầu của bản đồ tức là những gì bản đồ hiển thị khi tải và giá trị của nó ở định dạng kinh độ và vĩ độ.
Thu phóng: Đây là mức thu phóng ban đầu của bản đồ tức là bao nhiêu khu vực được hiển thị khi tải, thu phóng lớn hơn có nghĩa là gần bề mặt hơn.
Bên cạnh những thuộc tính được đề cập ở trên, có rất nhiều thuộc tính hiện diện nhưng những thuộc tính tốt đã đúng theo mặc định và phần còn lại là loại rắc rối không cần thiết. Và vui lòng kiểm tra và sử dụng nếu bạn muốnhttps://docs.mapbox.com/mapbox-gl-js/api/.
Vì vậy, bây giờ bạn đã xác định bản đồ của mình bằng cách tạo đối tượng bản đồ nhưng để sử dụng toàn bộ bản đồ này, bạn cần một thứ gọi là mã thông báo truy cập, đây là một khóa được Mapbox cấp khi bạn đăng ký với tư cách là người dùng để bất cứ khi nào bạn truy cập các dịch vụ Mapbox thông qua API của họ có thể biết rằng yêu cầu đến từ một người dùng đích thực. Vì vậy, về cơ bản mã thông báo truy cập giống như một mã bảo mật mà bạn cần phải có để sử dụng các dịch vụ của Mapbox. Và bạn có thể nhận miễn phí bằng cách đăng kýhttps://account.mapbox.com/auth/signin/sẽ cung cấp cho bạn mã thông báo công khai hoặc bạn có thể tạo mã mới từ phần tài khoản của mình trên trang web mapbox. Bạn có thể tạo mã thông báo khác này với các giới hạn URL (khiến bản đồ chỉ được truy cập từ các URL cụ thể). Chỉ cần nhấp vào tạo mã thông báo sẽ mở ra một cửa sổ nơi bên dưới bạn sẽ thấy hộp nhập liệu nơi bạn có thể thêm các URL (thường là URL trang web của bạn), cho phép họ thực hiện các yêu cầu thành công tới API Mapbox. Các hạn chế URL này bổ sung thêm một lớp bảo mật để nếu ai đó bằng cách nào đó có thể đặt chìa khóa của bạn và cố gắng thực hiện yêu cầu từ một số trang web khác, thì yêu cầu của họ sẽ bị từ chối vì trang web đó có thể không được liệt kê với các URL mà bạn được cung cấp trong khi tạo mã thông báo truy cập.
Vì vậy, sau khi bạn có mã thông báo của mình, bạn chỉ cần đi tới các tập lệnh hoặc tệp JS của bạn và bao gồm những thứ sau bên trên đối tượng bản đồ của bạn:
sentayho.com.vnssToken = ‘ACCESS_TOKEN’;
Nếu bạn đã chú ý đến đối tượng bản đồ ở trên, bạn có thể thấy rằng chúng tôi đã cung cấp thuộc tính trung tâm với các giá trị được mã hóa cứng cố định, tức là bản đồ của bạn là tĩnh và sẽ luôn hiển thị cùng một vị trí theo tọa độ trên mọi tải trừ khi bạn thay đổi các tọa độ trung tâm đó mọi lúc cho một vị trí khác. Vì vậy, sẽ không hay khi vị trí động hiển thị trên bản đồ.
Và điều đó đưa chúng ta đến khái niệm mã hóa địa lý là một quá trình lấy địa chỉ hoặc tên của một địa điểm và chuyển đổi nó thành các giá trị vĩ độ và kinh độ. Có hai loại mã hóa địa lý:
Chuyển tiếp mã hóa địa lý giúp chuyển đổi văn bản thành tọa độ địa lý.
Mã hóa địa lý đảo ngược chuyển đổi tọa độ địa lý thành mô tả văn bản.
Chúng tôi sẽ thực hiện mã hóa địa lý chuyển tiếp trong ứng dụng của mình.
Và thực tế có hai cách để triển khai mã hóa địa lý chuyển tiếp này:
Trong cách sử dụng mã hóa địa lý này, chúng tôi sẽ trao quyền kiểm soát cho người dùng, họ sẽ được cung cấp một hộp tìm kiếm bên trong cửa sổ bản đồ, nơi họ có thể nhập địa chỉ và nhận vị trí hiển thị trên bản đồ. Để thực hiện việc này khá đơn giản, tất cả những gì bạn phải làm chỉ là đưa đoạn mã dưới đây vào ứng dụng đã có của bạn –
// Include this code in HTML body // Promise polyfill script required to use Mapbox GL Geocoder in IE // 11 // Include this code in your script tags or JS file below your map // object sentayho.com.vnontrol( new MapboxGeocoder({ accessToken: sentayho.com.vnssToken, mapboxgl: mapboxgl }) );
Đôi khi chúng ta muốn có hộp tìm kiếm bên ngoài cửa sổ bản đồ của mình hoặc chúng ta có thể muốn sử dụng vị trí đã được lưu trữ trong cơ sở dữ liệu nào đó để hiển thị bản đồ khi tải thay vì người dùng nhập cho chúng ta nhưng đây là một quá trình dài để thực hiện, vì vậy hãy giữ điều đó cho một bài học khác để giữ cho hướng dẫn này đơn giản và vì vậy bạn sẽ không bị choáng ngợp.
Bản đồ của bạn đã sẵn sàng ngay bây giờ ……. Cũng gần như tốt !! Hãy làm cho bản đồ tương tác hơn một chút bằng cách thêm các điều khiển thu phóng và xoay (nghĩa là các dấu cộng & trừ giúp bạn phóng to và thu nhỏ bản đồ và xoay là dấu hiệu giúp bạn di chuyển bản đồ ở nhiều độ khác nhau) và cũng là một điểm đánh dấu tại Trung tâm.
Để thêm các điều khiển điều hướng, chỉ cần thêm sau khi bạn khai báo đối tượng bản đồ của mình –
// Add zoom and rotation controls to the map. sentayho.com.vnontrol(new sentayho.com.vngationControl()); sentayho.com.vn(“load”, function () { /* Image: An image is loaded and added to the map. */ sentayho.com.vnImage(“https://i.imgur.com/MK4NUzI.png”, function(error, image) { if (error) throw error; sentayho.com.vnmage(“custom-marker”, image); /* Style layer: A style layer ties together the source and image and specifies how they are displayed on the map. */ sentayho.com.vnayer({ id: “markers”, type: “symbol”, /* Source: A data source specifies the geographic coordinate where the image marker gets placed. */ source: { type: “geojson”, data: { type: ‘FeatureCollection’, features: [ { type: ‘Feature’, properties: {}, geometry: { type: “Point”, coordinates: [-74.5, 40] } } ] } }, layout: { “icon-image”: “custom-marker”, } }); }); });
Vậy là xong, bản đồ tương tác tuyệt đẹp của bạn đã sẵn sàng… ..Chúc mừng !!! Dễ dàng phải không? Bây giờ bạn có một trang web có bản đồ đẹp để mọi người có thể tương tác.
Của tôi đây sentayho.com.vn/nơi tôi đã sử dụng API hộp bản đồ để hiển thị bản đồ với vị trí cụ thể. Vàhttps://github.com/Harsh-Khurana/Activities_Pro mã cho nó nếu bạn muốn xem.
Một ghi chú từ JavaScript bằng tiếng Anh thuần túy
Chúng tôi đã đưa ra ba ấn phẩm mới! Thể hiện tình yêu đối với các ấn phẩm mới của chúng tôi bằng cách theo dõi chúng:https:///ai-in-plain-english, https:///ux-in-plain-english, https:///python-in-plain-english- cảm ơn bạn và tiếp tục học hỏi!
Chúng tôi cũng luôn quan tâm đến việc giúp quảng bá nội dung chất lượng. Nếu bạn có một bài báo mà bạn muốn gửi đến bất kỳ ấn phẩm nào của chúng tôi, hãy gửi email cho chúng tôi theo địa chỉ [email protected] với tên người dùng Phương tiện của bạn và chúng tôi sẽ giúp bạn thêm vào với tư cách là một nhà văn. Đồng thời cho chúng tôi biết bạn muốn thêm vào / xuất bản nào.
