您的位置:首页 > 产品设计 > UI/UE

vue中异步加载地图

2017-11-03 08:50 281 查看
我看到网上很多了写的vue中加载地图写的不太清楚,而且感觉不太正确,如果我们按照他们写的写,会报错,当然他们整个看是没有问题的,只是表示的不够明确。

首先我们新建一个map.js,然后在js中写

export default {
loadMap(k) {
return new Promise(function(resolve, reject) {
window.mapCallback = function() {
resolve(window.qq.maps)
}
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'http://map.qq.com/api/js?v=2.exp&callback=mapCallback&libraries=place,drawing,geometry,autocomplete,convertor&key=' + k
script.onerror = reject
document.head.appendChild(script)
})
}
}


其实和网上的差不多,但是还是有一点点区别,在链接里面有一个callback,这个是个回调函数,我写的是mapCallback,它的所属对象是window,我们写这个函数的时候最好是用window.函数名,然后还有一点是resolve(window.qq.maps),网上的写的是resolve(BMap)这类型的,没有指出所属对象,如果直接这样用会出现未定义的错误,引入了地图后,window会添加一个地图的对象。我这里使用的是腾讯地图,其他地图应该和这个差不多。
最后我们在组件里面这样使用

load() {
var _this = this
tmap.loadMap('你的key').then(Tmap => {
})
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  vue 地图加载