vue中异步加载地图
2017-11-03 08:50
281 查看
我看到网上很多了写的vue中加载地图写的不太清楚,而且感觉不太正确,如果我们按照他们写的写,会报错,当然他们整个看是没有问题的,只是表示的不够明确。
首先我们新建一个map.js,然后在js中写
其实和网上的差不多,但是还是有一点点区别,在链接里面有一个callback,这个是个回调函数,我写的是mapCallback,它的所属对象是window,我们写这个函数的时候最好是用window.函数名,然后还有一点是resolve(window.qq.maps),网上的写的是resolve(BMap)这类型的,没有指出所属对象,如果直接这样用会出现未定义的错误,引入了地图后,window会添加一个地图的对象。我这里使用的是腾讯地图,其他地图应该和这个差不多。
最后我们在组件里面这样使用
首先我们新建一个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 => { }) }
相关文章推荐
- Baidu Map 异步加载 解决手机Load 地图慢的问题
- vue awesome swiper异步加载数据出现的bug问题
- Vue异步加载about组件
- 虚幻4中异步加载Pak中地图实现场景切换的动态加载画面
- vue异步加载高德地图的实现
- vue.js 表格分页ajax 异步加载数据
- Javascript vue.js表格分页,ajax异步加载数据
- vue+webpack实现异步加载三种用法示例详解
- 百度地图API之地图加载方式(同步、异步)
- vue+webpack实现异步组件加载的方法
- Vue 子组件的异步加载及其生命周期控制
- 异步加载地图
- Vue+swiper异步加载轮播图,并且懒加载
- vue---vue2.x中如何异步加载路由组件,webpack+vue实现组件懒加载
- vue.js 表格分页ajax 异步加载数据
- 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
- vue在使用ECharts时的异步更新和数据加载详解
- 高德地图点击弹窗异步加载
- 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
- 百度地图-异步加载地图