记录一下vue项目引入百度地图
公共部分
#allmap {
width: 500px;
height: 500px;
font-family: "微软雅黑";
}
1、
<div id="allmap">
<baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</div>
data() {
return {
// 定位位置
center: {lng: 0, lat: 0},
// 地图放大等级
zoom: 3
}
}
methods: {
// 实例对象
handler ({BMap, map}) {
console.log(BMap, map)
// 经度
this.center.lng = 116.404
// 纬度
this.center.lat = 39.915
// 地图放大等级
this.zoom = 15
}
}
2、index.html引入
<script src="http://api.map.baidu.com/api?v=3.0&ak=0MGoqTzESLptR6j6LEmhlDey6ZO53yeZ"></script>
<!-- 以下可选scirpt -->
<script type="text/javascript" src="https://mapopen-pub-jsapigl.bj.bcebos.com/newThree/three.min.js"></script>
<script type="text/javascript" src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.151/dist/mapvgl.min.js"></script>
<script type="text/javascript" src="https://code.bdstatic.com/npm//mapvgl@1.0.0-beta.151/dist/mapvgl.threelayers.min.js"></script>
<script type="text/javascript" src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
mounted () {
var map = new BMap.Map('allmap');
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
3、单页面引入
<div id="allmap"></div>
data() {
return {
ak:'0MGoqTzESLptR6j6LEmhlDey6ZO53yeZ',
script:{type:'',src:''}
}
}
mounted () {
this.$nextTick(function() {
var _this = this;
MP(_this.ak).then(BMap => {
// 百度地图API功能
var map = new BMap.Map("allmap")
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
})
})
}
import {MP} from '@/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?ak="+ak+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}