【Vue+Mapbox】Vue中mapbox地图的使用（一）

最新推荐文章于 2024-05-17 17:02:30 发布

DoYouKnowArcgis

最新推荐文章于 2024-05-17 17:02:30 发布

阅读量2.1k

点赞数 1

分类专栏： vue mapbox 文章标签： vue.js

本文链接：https://blog.csdn.net/yuelizhe4774/article/details/125975864

版权

vue 同时被 2 个专栏收录

14 篇文章 8 订阅

订阅专栏

mapbox

6 篇文章 2 订阅

订阅专栏

唉，之前写的代码找不到了，码一下，方便自己以后使用。

STEP 1（安装mapbox使用包）：

官网提示【Module bundler】

在Vue终端执行上述操作，直到出现成功提示。

STEP 2（在Vue中引入相关文件）：

在main.js中添加

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

STEP 3 （在Vue中创建使用的地图窗口）：

xxx.vue

<template>
    <div id='map' style='width:400px;height:400px'></div>
</template>

<script>
export default{
    mounted(){
        this.initmap()
    }，
    methods:{
     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,
      });
    }
    }
}
</script>

成功展示。