vue3 中使用mapbox 简洁版

安装依赖

 yarn add mapbox-gl

调用地图，标记点位

<template>
  <div class="container"></div>
</template>

<script setup>
    import mapboxgl from "mapbox-gl/dist/mapbox-gl.js";
    import "mapbox-gl/dist/mapbox-gl.css";

    const initMap = () => {
      mapboxgl.accessToken = "token";
      let map = new mapboxgl.Map({
        container: "container",
        style: "mapbox://styles/mapbox/streets-v11",
        center: [114.48,36.60],
        zoom: 10 // 设置初始缩放级别
      });
      // 添加标记到地图
      markers.forEach(marker => {
        new mapboxgl.Marker()
            .setLngLat([marker.lng, marker.lat])
            .addTo(map);
      });
      // 全屏控件
      map.addControl(new mapboxgl.FullscreenControl());
      // 缩放控件
      map.addControl(new mapboxgl.NavigationControl());
      // 比例尺控件
      map.addControl(
          new mapboxgl.ScaleControl(
              {
                maxWidth: 100,
                unit: "metric"
              },
              "bottom-left"
          )
      );
      return map;
    }


    onMounted(()=>{
      initMap()
    })

</script>