百度地图js端 api调用
一、获取百度地图的app-key
第一步：在开发文档中找到获取ak的连接（获取ak之前需要申请百度账号并申请成为开发者）
第二步：选择浏览器端（即js端），具体的ak通行的功能可以根据自身需求来选择（注意，没有勾选的功能，生成的ak是不支持调用的）
第三步：生成好的ak可以在控制台进行管理，而后面在前台项目中导入百度地图就是靠着者个ak
二、通过CDN的方式引入百度地图
第一步：直接在项目public包下的index.html文件中全局引入百度地图
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>
第二步：当然除了引入script标签还不够，要想在vue文件中使用bmap对象，还需要在webpack的配置文件中，设置外部扩展(externals属性)，这样才可用将BMap对象全局暴露出来。（在vue cli3中，因为取消了build包，所以需要自己新建vue-config.js文件，然后在其中添加）
externals: {
'BaiduMap': 'BMap'
}
具体代码参考下方实例
import BaiduMap from 'BaiduMap' // 根据vue-config.js中定义的暴露的名称，在需要的页面中引入
export default {
name: 'Index',
.....
mounted() {
var map = new BaiduMap.Map('allmap') // 创建地图实例
var point = new BaiduMap.Point(120.343373,31.540212) // 创建中心点坐标
var marker = new BaiduMap.Marker(point) // 创建标注
map.centerAndZoom(point,15) // 初始化地图，设置中心点坐标和地图级别
map.addOverlay(marker) // 将标注添加到地图中
}
注意这里，实例化地图api，最好要在mounted阶段进行，如果你的dom中采用的是官方的示例如
<div id="allmap"></div>
因为只有在mounted的阶段，dom才会生成并挂载。并且用于渲染地图的div需要有具体的width和height，否则地图无法显示出来。
三、通过引入Vue-baidu-Map组件的方式使用百度地图
实际上百度地图官方去年已经开源了基于jsApi的vue和react的对应开源组件，我们可以直接通过npm安装，然后使用。
VUE:[github.com/Dafrok/vue...]
可参考它们在github上面的文档进行使用。这里只介绍下vue的。 安装
第一步：首先需要在项目dos窗口执行
npm i vue-baidu-map --save
第二步：在main.js中全局引入并初始化
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 'YOUR_APP_KEY' //这个地方是官方提供的ak密钥
})
第三步：在自己需要使用的页面或组件中直接用标签的方式去使用就行了
<template>
<baidu-map class="map">
</baidu-map>
</template>
<style>
/* The container of BaiduMap must be set width & height. */
.map {
width: 100%;
height: 300px;
}
</style>
四、总结
通过以上的两张方式就可以将百度地图引入到自己的vue项目中，但是在使用具体的类功能时仍然有许多问题，所以在使用的时候一定要注意百度官方提供的文档中的注意事项，防止掉进坑中。
在通过Vue-baidu-Map的方式使用时，通过标签的方式去实现的功能是有限的，并且不如直接用js代码来实现自由，所以在特殊场景下，可以在<baidu-map>便签中的@ready="handler"方法中保存BMap对象，以便于通过js代码的方式自定义功能
