mapbox全球地图添加多个标注点并显示标签

最近在给公司做一个项目，需要世界地图，百度和腾讯没有英语版，只有高德有，但是高德的缩放率不满足需求，在大屏的情况下还可以，屏幕缩小以后，显示不全。

就会有很多想到用谷歌地图，但是作为一个程序员你懂的，谷歌地图在国内打不开啊，你可以开发，但是对于国内客户是无法看的。

于是搜来搜去找到了一个国外的地图接口。mapbox

官网文档地址：https://docs.mapbox.com/

国内CDN加速资源：https://www.bootcdn.cn/mapbox-gl/

先给大家看看效果：

看到了吧，可以直接全屏看到全球地图，并且标注为止，同时加上的标签。

因为mapbox 的 Marker 功能没有标签选项，说实话这一点不如国内地图做的人性化一些。

于是我就用了 Popup功能，并且禁止隐藏，然后设定偏移量，这样也达到了国内地图上面设置的 Label 功能，并且可以自定义css样式，更加便利了。

废话不说了直接上代码：