【无标题】

写这篇文章的原因的之前找vue中如何使用百度地图，大部分文章或教程写的不详细，甚至没有vue版。所以自己写篇文章，以后要是不记得的话可以翻翻这篇文章

步骤一：获取百度地图AK

组测登录进入控制台

创建应用

注意应用类型：浏览器端

创建成功获得AK

#步骤二：vue项目中使用百度地图
创建js文件将一下代码复制进去

export default function loadBMap(ak) {
    return new Promise(function(resolve, reject) {
      if (typeof BMap !== 'undefined') {
        resolve(BMap)
        return true
      }
      window.onBMapCallback = function() {
        resolve(BMap)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src =
        'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=onBMapCallback'
      script.onerror = reject
      document.head.appendChild(script)
    })
  }
  

在vue中使用

<template>
    <div class="map-area" :id="mapId"></div>
</template>
<script>
import loadBMap from './common/index.js'
export default {
    data() {
        return {
            mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
            map: null
        }
    },
    mounted() {
        this.initMap()
    },
    methods: {
        initMap() {
            loadBMap('你的AK').then(() => {
         // 百度地图API功能
 this.map = new BMap.Map(this.mapId) // 创建Map实例
 this.map.centerAndZoom(new BMap.Point(115.97245588236879,29.654823757600543), 11) // 初始化地图,设置中心点坐标和地图级别
 this.map.addControl(new BMap.NavigationControl());
 this.map.addControl(new BMap.ScaleControl());
 this.map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用  
 this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
}).catch(err => {
           console.log('地图加载失败')
})
 }
  }
}
</script>
<style scoped>
.map-area {
    width: 100%;
    height: 500px;
}
</style>
  

步骤三：地图完成

注意注意：这里的地图是2.0版本的所以看教程要看2.0 版本的

各个版本:地图版本