mapbox+vue 基本使用(一)

·1、安装mapbox使用包

npm install mapbox-gl

2、在main.js中添加

import mapBoxGl from 'mapbox-gl'
Vue.prototype.$mapboxgl = mapBoxGl

3、在Vue中创建使用的地图窗口

<template>
    <div id='map' style='width:400px;height:400px'></div>
</template>
 
<script setup>
import {onMounted,ref,} from "vue";

const initmap = ()=>{
      this.$mapboxgl.accessToken ='注册获取的Token';
      var map = new this.$mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        center: [104.07, 30.67],
        zoom: 5,
      });
}
onMounted(()=>{
    initmap()
})
</script>