vue mapbox

Vue Mapbox是一个基于Vue.js和Mapbox的地图组件库，它提供了一系列易于使用的组件和指令，可以帮助你快速构建交互式地图应用程序。下面是一个简单的示例，演示如何在Vue中使用Mapbox：

首先，安装Vue Mapbox：

npm install vue-mapbox mapbox-gl --save

然后，在Vue组件中引入Mapbox：

<template>
  <div>
    <MglMap
      :accessToken="accessToken"
      :mapStyle.sync="mapStyle"
      :center.sync="center"
      :zoom.sync="zoom"
    >
      <MglNavigationControl />
      <MglGeolocateControl />
      <MglFullscreenControl />
    </MglMap>
  </div>
</template>

<script>
import { MglMap, MglNavigationControl, MglGeolocateControl, MglFullscreenControl } from 'vue-mapbox'
import mapboxgl from 'mapbox-gl'

export default {
  components: {
    MglMap,
    MglNavigationControl,
    MglGeolocateControl,
    MglFullscreenControl
  },
  data () {
    return {
      accessToken: 'your-access-token',
      mapStyle: 'mapbox://styles/mapbox/streets-v11',
      center: [-122.4194, 37.7749],
      zoom: 12
    }
  },
  created () {
    mapboxgl.accessToken = this.accessToken
  }
}
</script>

在上面的示例中，我们首先引入了Mapbox的地图组件，然后在Vue组件中使用这些组件来创建地图。我们还设置了一些地图的属性，例如地图样式、中心点和缩放级别。最后，我们将Mapbox的访问令牌设置为Vue组件的数据属性，以便在创建地图时使用。