最近项目里要用到经纬度,之前用到过,于是写个组件进行引用,但是这次突然出现一个问题就是BMap is not defined,上网查很多,各路大神很多方法最多的便是在通main.js同级建一个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?v=2.0&ak=' + ak + '&callback=init'
script.onerror = reject
document.head.appendChild(script)
})
}
在自己创建的地图组建中进行引入,我建的地图的组件为Map.vue
在Map.vue中进行引入(看好目录)
import { MP } from './../../map.js'
mounted () {
this.$nextTick(function () {
var _this = this;
//写入自己的ak
MP(_this.ak).then(BMap => {
//在此调用api
this.go()//这是我自定义的
})
})
},
methods: {
//要传递的经纬度数据
go () {
var map = new BMap.Map("allmap")
var point = new BMap.Point(116.331398, 39.897445)
map.centerAndZoom(point, 12)
var geolocation = new BMap.Geolocation()
let _this = this
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point)
map.addOverlay(mk)
map.panTo(r.point)
// console.log(r.point.lng + ',' + r.point.lat)
const obj = {
lng: r.point.lng,
lat: r.point.lat
}
// this.obj = r.point.lng + ',' + r.point.lat
_this.$emit('fna', obj)
//return obj
}
else {
alert('failed' + this.getStatus())
}
}, { enableHighAccuracy: true })
}
}
这样报错信息就会消除