MENU

在网页中加载Mapbox地图

January 15, 2020 • 折腾

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

开始想用高德地图之类的来着,可是有注册开发者账号,实名验证等等麻烦事儿。于是我把目光投向了国外的地图服务提供商,GoogleMap因众所周知的原因首先就排除了,后来挑了很久,我决定使用Mapbox加载的服务。

注册/登录Mapbox Account

点击链接进入官网注册并登录账户
登录后界面应该是这样的

Install Mapbox SDK

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

    1. 复制CSSJS文件
    2. 在中粘贴(这里要根据自己的实际情况哦)
  • 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中的URLtoken

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

Last Modified: February 12, 2020
Archives QR Code
QR Code for this page
Tipping QR Code