mapbox在vue中的使用

npm 安装：

npm install --save mapbox-gl

css文件引入

方式1：在index.html页面引入

<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />

方式2：在main.js中引入

import 'mapbox-gl/dist/mapbox-gl.css'

vue页面内使用

<script>
import mapboxgl from "mapbox-gl";
export default {
  name: "mapbox",
  data() {
    return {
      msg: "Welcome to MapBox~",
    };
  },
  mounted() {
    mapboxgl.accessToken ="pk.***......";    //你的accessToken
    var map = new mapboxgl.Map({
      container: "mapbox",   //地图容器的id
      center: [113.2, 23.4], //中心点
      zoom:6.5,              //地图初始化时的层级
      style:"mapbox://styles/mapbox/navigation-preview-night-v2" ,   //底图样式
    });
  },
};
</script>