vue中使用百度地图的三种方法

一、获取百度地图ak
地址：http://lbsyun.baidu.com/apiconsole/key
1、注册。填入姓名、手机号、验证码、邮箱点击提交。
2、打开邮箱，激活。
3、创建一个应用，填入应用名称，根据需要选取需要的服务。
选择服务器端，IP白名单如果不对IP有限制，可写0.0.0.0/0；选择浏览器端，不限制IP可写*

二、vue中使用百度地图的三种方式

方法一：
1、index.html中引入

<script type="text/javascript" src=" http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script> 

2、新建组件maps（html中有map标签，因此不要命名为map）
在maps中创建，给定容器，调用API绘图，添加交互效果

export default { 
  name: "App", 
  methods: { 
    map() { 
      let map = new BMap.Map(this.$refs.allmap); // 创建Map实例 
      map.centerAndZoom(new BMap.Point(121.484222, 31.242478), 11); // 初始化地图,设置中心点坐标和地图级别 
      map.addControl( 
        new BMap.MapTypeControl({ 
          //添加地图类型控件 
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] 
        }) 
      ); 
      map.setCurrentCity("上海"); // 设置地图显示的城市 此项是必须设置的 
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
}
} 

方法二：
1、新建一个map.js

export function MP(ak) {
 return new Promise(function (resolve, reject) {
  window.onload = function () {
   resolve(BMap)
  }
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
  script.onerror = reject;
  document.head.appendChild(script);
 })
}

2、在需要用到的地图vue页面中引入

import {MP} from './map.js'

3、在vue页面中调用

data:{
  return{
    ak:'1287348913029483740293'//密钥
  }
},
mounted(){
  this.$nextTick(function(){
   var _this = this;
   MP(_this.ak).then(BMap => {
    //在此调用api
   })
  }
}

方法三：vue地图组件（推荐） vue-baidu-map官网
1、安装

npm install vue-baidu-map --save

2、注册组件
全局注册
全局注册将一次性引入百度地图组件库的所有组件。

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})
<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>
<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

局部注册
如果有按需引入组件的需要，可以选择局部注册百度地图组件，这将减少工程打包后的容量尺寸。局部注册的 BaiduMap 组件必须声明 ak 属性。 所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 include 和 exclude 选项命中了组件库。

<template>
  <baidu-map class="bm-view" ak="YOUR_APP_KEY">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

CDN全局注册

<script>
Vue.use(VueBaiduMap.default, {
  ak: 'YOUR_APP_KEY'
})
</script>

常见问题
BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。