標籤：

手把手教你從 Google Maps 換到 Mapbox

03-19

故事你可能聽說了，Google Maps 從6.11開始要收費了。

現在，就讓我們愉快地學習一下，如何從谷歌地圖轉換到 Mapbox， 嗯……。

以下教程，將為你講解——如何通過基於 WebGL 的地圖庫—— Mapbox GL JS 來創建地圖，如何放置標記，以及如何添加彈出信息。方法與你使用谷歌地圖時使用的 API 差不多，相信你一定可以很快搞定！

?? 準備工作

  • 一個 access token
  • Mapbox GL JS

最新版的 Mapbox GL JS Javascript 和 CSS 文件。將下面這段編碼複製粘貼在你 HTML 文檔的第一個標籤內，你就可以直接連接到你的 Mapbox 了。

<script src=api.mapbox.com/mapbox-g></script>

<link href=api.mapbox.com/mapbox-g rel=stylesheet />

  • 文本編輯器

用來編寫 HTML, CSS, JavaScript，比如記事本、Sublime、Visual Studio Code。

?? 開始建立網頁

首先，建立一個 HTML 文檔，並將前面提到的 JavaScript 和 CSS 文檔加在最前面。建立好你的 HTML 文檔後，就進入下一步吧！

Google

使用 Google Maps JavaScript API，你是通過如下代碼來創建新地圖的：

var map = new google.maps.Map(document.getElementById(map), {

mapTypeId: roadmap,

center: { lat: 64.1436456, lng: -21.9270884 },

zoom: 13

});

Mapbox GL JS

在 Mapbox GL JS 中，初始化地圖使用的也是類似的方法。下面舉例的代碼使用的是 Mapbox 街景模板樣式，倍率和比例尺都是默認的比率。「style」 這一行後面加的是這個街景樣式的URL：

var map = new mapboxgl.Map({

container: map, // HTML container id

style: mapbox://styles/mapbox/streets-v10, // style URL

center: [-21.9270884, 64.1436456], // starting position as [lng, lat]

zoom: 13

});

除了模板樣式，你還可以在 Mapbox Studio 中自己設計樣式，或者在運行中根據你的需要動態修改你的樣式。

?? 放置標記

進入下一個環節，現在教你如何在地圖上放置單獨的標記。

Google

使用谷歌地圖的一般操作是 ：

var map = new google.maps.Map(document.getElementById(map), {

mapTypeId: roadmap,

center: { lat: 64.1436456, lng: -21.9270884 },

zoom: 13

});

var marker = new google.maps.Marker({

position: { lat: 64.1436456, lng: -21.9270884 },

title: Reykjavik Roasters - Coffee Shop,

map: map

});

Mapbox GL JS

在 Mapbox 中有許多不同的方法可以為地圖放置標記，下面舉的例子添加的是默認標記：

var map = new mapboxgl.Map({

container: map, // HTML container id

style: mapbox://styles/mapbox/streets-v10, // style URL

center: [-21.9270884, 64.1436456], // starting position as [lng, lat]

zoom: 13

});

var marker = new mapboxgl.Marker()

.setLngLat([-21.9270884, 64.1436456])

.addTo(map)

想添加多個標記？可以通過 GeoJSON source 或者 vector tileset source 來達成！

?? 增加交互功能

當用戶點擊標記時，通常會伴隨提示信息的彈出。那如何製作彈出信息呢？

Google

在谷歌地圖中，彈出信息提示是在「InfoWindow」中設置的：

var map = new google.maps.Map(document.getElementById(map), {

mapTypeId: roadmap,

center: { lat: 64.14356426, lng: -21.92661562 },

zoom: 13

});

var marker = new google.maps.Marker({

position: { lat: 64.14356426, lng: -21.92661562 },

map: map

});

var infowindow = new google.maps.InfoWindow({

content: <h3>Reykjavik Roasters</h3><p>A good coffee shop</p>

});

marker.addListener(click, function() {

infowindow.open(map, marker);

});

Mapbox GL JS

在 Mapbox 中，你可以直接將彈出信息附在標記上，當標記被點擊時會自動觸發，不再需要單獨添加一個事件監聽器（event listener）。以下是附加彈出信息的 HTML 編碼：

var map = new mapboxgl.Map({

container: map, // HTML container id

style: mapbox://styles/mapbox/streets-v10, // style URL

center: [-21.92661562, 64.14356426], // starting position as [lng, lat]

zoom: 13

});

var popup = new mapboxgl.Popup()

.setHTML(<h3>Reykjavik Roasters</h3><p>A good coffee shop</p>);

var marker = new mapboxgl.Marker()

.setLngLat([-21.92661562, 64.14356426])

.setPopup(popup)

.addTo(map);

學會了嗎！如何使用 Mapbox GL JS 創建地圖、放置標記、添加彈出信息了！想要了解更多其他功能的用法，可以查看我們其他的教程，有更多技術文檔和實際應用案例可以在我們的官網查詢喲。


推薦閱讀：

TAG:科技 |