MENU

在网页中加载Mapbox地图

January 15, 2020 • 折腾

一直想在【关于】页面加一个地图,由于种种原因(懒)始终没行动,今天比较闲就搞一下咯。


开始想用高德地图之类的来着,可是有注册开发者账号,实名验证等等麻烦事儿。

于是我把目光投向了国外的地图服务提供商,

GoogleMap 因众所周知的原因首先就排除了,后来挑了很久,我决定使用 Mapbox 的服务。

注册/登录 Mapbox Account

点击链接进入官网注册并登录账户

登录后界面应该是这样的

Install Mapbox SDK

  • 我们用于网页所以选择 Web
  • 选择 Use the Mapbox CDN
  • Include the GL JS files

    1. 复制 CSS 和 JS 文件
    2. <head>中粘贴(这里要根据自己的实际情况哦)
  • Add the map to your site ,也是复制粘贴,大同小异大同小异

使用 Mapbox Studio

  • 这里的 template 根据自己的需要来选择,这里我勾选 Satelllte Streets ,也就是卫星图然后 Customize
  • 根据自己的需要调整地图,层次,颜色,图块等各种信息,最后 publish(我这里以使用北京天安门的卫星图为例)

  • 回到 Studio 界面 share 刚才的地图,复制 Style URL 和 Access token ,用它替换掉刚才 Add the map to your site 中的 URL 和 token

好了(●°u°●)​ 」,通常情况下此时地图已经可以加载了:

Last Modified: May 25, 2020
Archives QR Code
QR Code for this page
Tipping QR Code