前言
由于项目中需要用到逆地址解析功能及由坐标点（112.54362， 30.2546）转为地址信息（xx省xx市xx县），故考虑用百度地图API进行完成。
查阅资料有两种方法可以实现。
第一种 直接引入script标签
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
此时我们还需要告诉webpack，这个是在运行时再去从外部获取这些扩展依赖。
需要在webpack.base.conf.js中设置externals属性，以便可以在vue中进行引用
image.png
接下来就可以在文件中愉快的引用了
import BMap from 'BMap';
在我愉快的写好的代码后，发现还是太年轻。
我项目中用到了api的定位和逆地址解析功能，发现后台有警告并且api功能无法使用
image.png
点开发现百度js的内容为：
(function(){
window.BMap_loadScriptTime = (new Date).getTime();
document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=你的密钥&services=&t=20200109192240"></script>');
})();
里面包含了 document.write方法，而异步加载的js是不允许使用document.write方法的
将我们之前的引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
修改为下面的样子，及console里面有对应的url.填入那个url之后便可正常使用,且不会有提示了,而且能正确使用里面的api了
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=你的密钥&services=&t=20200109192240"></script>
第二种 通过模块化引入的方法
百度地图官方已经有api的vue版本
地址：https://github.com/Dafrok/vue-baidu-map
安装
npm i --save vue-baidu-map
初始化
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 'YOUR_APP_KEY'
})
使用
<template>
<baidu-map class="map">
</baidu-map>
</template>
<style>
/* The container of BaiduMap must be set width & height. */
.map {
width: 100%;
height: 300px;
}
</style>
