vue中怎么引入mapbox
时间: 2024-03-07 09:53:47 浏览: 14
在Vue中引入Mapbox可以通过以下步骤:
1. 安装mapbox-gl和vue-mapbox插件
```
npm install mapbox-gl vue-mapbox
```
2. 在Vue组件中引入Mapbox
```
<template>
<div>
<MglMap
:accessToken="accessToken"
:mapStyle.sync="mapStyle"
:zoom.sync="zoom"
:center.sync="center"
:pitch.sync="pitch"
:bearing.sync="bearing"
style="height: 500px;"
/>
</div>
</template>
<script>
import { MglMap } from 'vue-mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
export default {
components: {
MglMap,
},
data() {
return {
accessToken: 'your_access_token_here',
mapStyle: 'mapbox://styles/mapbox/streets-v11',
zoom: 10,
center: [-74.5, 40],
pitch: 0,
bearing: 0,
};
},
};
</script>
```
3. 在Vue组件中引入Mapbox的CSS样式
```
<style>
@import url('https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css');
</style>
```
注意:在引入Mapbox时需要替换`your_access_token_here`为自己的Mapbox Access Token。