vue 里面异步加载高德地图
前言
关于Vue 里面使用异步加载高德地图
- 项目中其实只有几处需要用到地图,不需要全局引入
- 在index文件中引入js会明显拖慢首屏加载速度,虽然可以使用异步加载script的方式解决,但是始终觉得不够优雅。
解决方案
1.创建一个AMap.js,路径'utils/AMap'
export default function MapLoader () { // <-- 原作者这里使用的是module.exports
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=yourkey'
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}
2. 在任何.vue文件中使用
// test.vue
<template>
<div class="test">
<div id="container" class="h300 w300"></div>
</div>
</template>
<script>
import MapLoader from '@/utils/AMap'
export default {
name: 'test',
data () {
return {
map: null
}
},
mounted () {
let that = this
MapLoader().then(AMap => {
console.log('地图加载成功')
that.map = new AMap.Map('container', {
center: [117.000923, 36.675807],
zoom: 11
})
}, e => {
console.log('地图加载失败' ,e)
})
}
}
</script>
3.就解决了
一个异步加载的高德地图插件,不需要在全局引入,也不用担心功能不齐全,其他的东西,完全参照高德地图官方文档来设置即可。
如图:

vue 里面异步加载高德地图的更多相关文章
- Vue异步加载高德地图API
项目中用到了高德地图的API以及UI组件库,因为是直接把引入script写在index.html中,项目打包后运行在服务器,用浏览器访问加载第一次时会非常慢,主要原因是加载高德地图相关的js(近一分钟 ...
- arcgis 加载高德地图 es6的方式
目前很多arcgis 加载高德地图是dojo的方式 外部引入文件,现在改成这种方式 /** * Created by Administrator on 2018/5/14 0014. */ impor ...
- (转)Openlayers 2.X加载高德地图
http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...
- OpenLayers加载高德地图离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
- Vue 组件异步加载(懒加载)
一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...
- vue swiper异步加载轮播图,并且懒加载
参考:https://blog.csdn.net/weixin_38304202/article/details/78282826 效果: 此处安装省略 vue: <div class=&quo ...
- openLayers加载高德地图
之前用openlayers对高德,百度,腾讯,bing,supermap,天地图,arcgis,google等地图进行了对接,今天简单介绍一下openlayers+高德: 在Openlayers.La ...
- 当vue页面异步加载的数据想在页面上渲染怎么办
<template> <div class="test"> <div v-for="(item, index) in arr" : ...
- Arcgis api For silverlight 加载高德地图
原文 http://www.cnblogs.com/thinkaspx/archive/2012/11/13/2767752.html 地图仅供演示,研究使用.如要商用 请联系厂商. public c ...
随机推荐
- LeetCode.1154-一年中的第几天(Day of the Year)
这是小川的第410次更新,第442篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第261题(顺位题号是1154).给定表示格式为YYYY-MM-DD的公历日期的字符串日期,返回 ...
- python高级 之(一) --- 函数类型
函数 模块 模块: 一个py文件就是一个模块, 每个模块之间是可以相互访问的 访问之前需要进行导入 分类: 1.系统提供的模块 math random 2.自己自定义的,自己封装的常用功能的的py文件 ...
- 【DSP开发】【图像处理】Gray与YUV之间的转换关系
标准的V4L2 API http://v4l.videotechnology.com/dwg/v4l2.pdf 在例程/home/dvevm_1_20/demos/ImageGray中,涉及到图像采集 ...
- 重学 html の meta 标签
参考链接: https://segmentfault.com/a/1190000019052062?utm_medium=hao.caibaojian.com&utm_source=hao.c ...
- [xpath] 定位中starts-with、contains和text()的用法
starts-with 顾名思义,匹配一个属性开始位置的关键字 contains 匹配一个属性值中包含的字符串 text() 匹配的是显示文本信息,此处也可以用来做定位用 eg //input[sta ...
- PTA(Advanced Level)1046.Shortest Distance
The task is really simple: given N exits on a highway which forms a simple cycle, you are supposed t ...
- powerdesigner去掉网格线
powerdesigner去掉网格线 去掉网格线
- CF 1133B Preparation for International Women's Day
题目链接:http://codeforces.com/problemset/problem/1133/B 题目分析 读完题目,凡是先暴力.....(不用想,第四组数据就TLE了,QAQ) 当两个数的和 ...
- 十进制快速幂(牛客多校第五场)-- generator 1
思路: 十进制快速幂. #include <stdio.h>//sprintf #include <cstdlib>////malloc exit strcat itoa sy ...
- golang 组装返回json数据,提供api接口
model里 package model type Setting struct { Key string `gorm:"primary_key" json:"key&q ...