1. 简单入门
- 首先在百度地图开放平台创建服务，获取
AK。（注：这里主要设置白名单）
详情
- 在
index.html中引入如下代码：
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak= 你的ak "></script>
- 在
webpack.base.conf.js文件最下方添加如下代码：
externals: {
'BMap': 'BMap'
},
代码位置
- 在所需要使用 地图的
vue页面中
import BMap from 'BMap'
mounted () {
this.renderMap()
},
methods: {
renderMap() {
this.map = new window.BMap.Map('container'); // 创建地图
this.map.enableScrollWheelZoom(true); // 启用滚轮放大缩小
this.map.centerAndZoom(this.point, 12); // 初始化地图，设置城市和地图级别
this.map.addControl(new BMap.NavigationControl()); // 平移缩放控件
this.map.addControl(new BMap.ScaleControl()); // 比例尺
this.map.addControl(new BMap.OverviewMapControl()); // 缩略地图
this.map.addControl(new BMap.MapTypeControl()); // 地图类型
this.map.setCurrentCity("杭州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
},
}
问题1. Vue 打包生成的 dist 文件，访问后一片空白，控制台会报错，输出 BMap is not defined
解决方法：
在 工具类文件夹下创建 map.js，代码如下：
export default {
init: function () {
const AK = ' 你的AK '
const BMapURL = 'https://api.map.baidu.com/api?v=3.0&ak=' + AK + '&s=1&callback=onBMapCallback'
return new Promise((resolve, reject) => {
// 如果已加载直接返回
// if (typeof BMap !== 'undefined') {
// resolve(BMap)
// return true
// }
// 百度地图异步加载回调处理
window.onBMapCallback = function () {
console.log('百度地图脚本初始化成功...')
// eslint-disable-next-line
resolve(BMap)
}
// 插入script脚本
let scriptNode = document.createElement('script')
scriptNode.setAttribute('type', 'text/javascript')
scriptNode.setAttribute('src', BMapURL)
document.body.appendChild(scriptNode)
})
}
}
接着在想要使用 地图的 .vue 文件中引入一下代码：
import BaiduMap from '../utils/map.js'
BaiduMap.init()
.then((BMap) => {
console.log(BMap)
// 这个时候就可以访问到BMap了，
})
代码添加位置
接下来就可以参考百度地图示例，进行个性化的地图定制了。
