安装JavaScript API v3.0
需求
在vue项目中使用原生的百度JavaScript API v3.0。
技术点
官网地址: JavaScript API - 快速入门 | 百度地图API SDK
开发文档:百度地图JSAPI 3.0类参考
引入方式安装
第一步:在public的index.html中引入
<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>
第二步:组件中使用
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
};
},
mounted() {
this.map = new BMap.Map("map");
this.map.centerAndZoom(new BMap.Point(117.06 ,36.67), 17);
this.map.enableScrollWheelZoom();
},
}
</script>
<style lang="less">
#map {
width: 300px;
height: 300px;
margin-top: 50px;
}
</style>
bmap.js安装
在src文件夹目录下安装bmpgl.js。
export function MP(ak) {
return new Promise(function(resolve, reject) {
window.init = 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)
})
}
在组件中使用
import { MP } from '../map.js'
mounted() {
this.$nextTick(() => {
const that = this
MP(that.ak).then(BMap => {
// ...
})
})
}