简述如何在web页面引用mapbox的静态地图

在web页面上对于静态地图的引用，你可以直接用一个img标签引用，或者当作背景图片引用，重点是路径的格式

有两种制作静态地图的方法：使用mapbox studio，使用static images api

先说使用static images api，如图所示

这是一个交互式地图，可以拖动，左边修改对应的参数，通过longitude和latitude可以定位到任何地方，中间的方框范围就是你引用的静态地图的范围，然后使用上面的Request URL直接作为链接引用。

当然这里面你也可以做标记，画路线，不过比较麻烦，需要经纬度的具体数值。

然后说mapbox studio制作

这个需要自己修改链接的一些参数，大概格式为：

https://api.mapbox.com/styles/v1/{username}/{style_id}/static/{overlay}/{lon},{lat},{zoom},{bearing},{pitch}|{bbox}|{auto}/{width}x{height}{@2x}?access_token={your_token}

这里就说明几个重要的参数，如果你要引用地图，必须去mapbox的网页去注册一个账号，username填写你的账号名称，点开你的账户(Account)，会有令牌的设置，也就是token,你可以添加，可以直接用的默认公共令牌，复制其中的内容，直接填入路径中的your_token那里。

width和height为显示的宽高，overlay参数对于这种方法不适用，选择不填，lon和lat为地图中心的经纬度，zoom为放大倍数，其他的参数的意思可以自己去查阅选填。

这里举一个例子，比如说我的username为 zhangsan，tocken为 abc，我要显示的地图的中心坐标为113.666, 34.770，放大13倍，样式style_id为 abcd,显示框500x500的大小

就可以填成https://api.mapbox.com/styles/v1/zhangsan/abcd/static/113.666, 34.770，13/500x500?access_token=abc

这里可能有的人不想要地图的中心经纬度来显示，可以用bbox参数，做法就是将上面链接标红的部分换成  [ ]，里面依次填入高纬度，高经度，低纬度，低经度，然后可以在？的后面加上padding参数调一下窗口的位置（padding=0，0，0，0&）。

下面来说一下style_id怎么填写，你需要打开Mapbox Studio,右上角有三个选项：styles  tilesets  datasets。

1.先点击datasets,点击New datasets,为它起一个名字，方便记忆，然后点击creat.

 

右边的搜索框可以帮助你快速找到某个地点，也可以选择地图的样式（主要显示建筑还是路线,地形）。通过左边的三个形象的小图标，分别绘制点，线，和多边形，这个挺简单的。

绘制完后，会出现个Add property的按钮，可以填写field和value,就是做个标记，显示文字。然后保存，点击save，然后点击Export。

2.然后回到之前的页面，你会发现多了个你刚刚绘制的，之后点击Tilesets,点击New tilesets,从datasets中导入，也就是点击creat from datasets，选择你刚刚完成的。点击Export datasets,然后取个名字即可。

3.最后点击styles,点击创建，选择一个你喜欢的风格，

点击Layers，也就是图层，点击加号，然后选择你刚刚加载的，名字你应该还记得，之后

这里面的Select data  Type选择你要显示的，这个只能显示一个，因为你绘制的路线，标记，文字都有，而它只能显示其中一种，所以你得再给它加一层，选中这个图层，点击加号右边的重复一层。

在副本里面选择其他要展示的即可。当然你要定位到你绘制路线的地方才能看到。最后保存就好了。

在这里复制一下Style URL,这个就是你要填写的style_id.

 

最后，引用你填写好的路径即可，这里你可能会对经纬度的准确值感到烦恼，你在添加图层的时候，进入new styles里面的时候，上面会有当前地图的中心的经纬度及放大倍数。你还可以根据这个到static images api 里面去查找，然后点击bounding box，再调节移动方框的位置，得到bbox参数的值。