基础知识系列（七）：Vue3结合Mapbox

1.pnpm create vue

2.创建.env文件，其中写VITE_MAPBOX_TOKEN=''

3.pnpm i mapbox-gl

4.pnpm i

5.在App.vue中，写

<template>
  <div id="map"></div>
</template>

<script setup>
import mapboxgl from "mapbox-gl";
import 'mapbox-gl/dist/mapbox-gl.css';
import { onMounted } from "vue";
const TOKEN = import.meta.env.VITE_MAPBOX_TOKEN;
mapboxgl.accessToken = TOKEN;
onMounted(() => {
  const map = new mapboxgl.Map({
    container: "map", // container ID
    style: "mapbox://styles/mapbox/streets-v12", // style URL
    center: [114.30, 30.50], // starting position [lng, lat]
    zoom: 9, // starting zoom
  });
});
</script>

<style scoped>
#map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>