前言

关于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 里面异步加载高德地图的更多相关文章

  1. Vue异步加载高德地图API

    项目中用到了高德地图的API以及UI组件库,因为是直接把引入script写在index.html中,项目打包后运行在服务器,用浏览器访问加载第一次时会非常慢,主要原因是加载高德地图相关的js(近一分钟 ...

  2. arcgis 加载高德地图 es6的方式

    目前很多arcgis 加载高德地图是dojo的方式 外部引入文件,现在改成这种方式 /** * Created by Administrator on 2018/5/14 0014. */ impor ...

  3. (转)Openlayers 2.X加载高德地图

    http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...

  4. OpenLayers加载高德地图离线瓦片地图

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...

  5. Vue 组件异步加载(懒加载)

    一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...

  6. vue swiper异步加载轮播图,并且懒加载

    参考:https://blog.csdn.net/weixin_38304202/article/details/78282826 效果: 此处安装省略 vue: <div class=&quo ...

  7. openLayers加载高德地图

    之前用openlayers对高德,百度,腾讯,bing,supermap,天地图,arcgis,google等地图进行了对接,今天简单介绍一下openlayers+高德: 在Openlayers.La ...

  8. 当vue页面异步加载的数据想在页面上渲染怎么办

    <template> <div class="test"> <div v-for="(item, index) in arr" : ...

  9. Arcgis api For silverlight 加载高德地图

    原文 http://www.cnblogs.com/thinkaspx/archive/2012/11/13/2767752.html 地图仅供演示,研究使用.如要商用 请联系厂商. public c ...

随机推荐

  1. LeetCode.1154-一年中的第几天(Day of the Year)

    这是小川的第410次更新,第442篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第261题(顺位题号是1154).给定表示格式为YYYY-MM-DD的公历日期的字符串日期,返回 ...

  2. python高级 之(一) --- 函数类型

    函数 模块 模块: 一个py文件就是一个模块, 每个模块之间是可以相互访问的 访问之前需要进行导入 分类: 1.系统提供的模块 math random 2.自己自定义的,自己封装的常用功能的的py文件 ...

  3. 【DSP开发】【图像处理】Gray与YUV之间的转换关系

    标准的V4L2 API http://v4l.videotechnology.com/dwg/v4l2.pdf 在例程/home/dvevm_1_20/demos/ImageGray中,涉及到图像采集 ...

  4. 重学 html の meta 标签

    参考链接: https://segmentfault.com/a/1190000019052062?utm_medium=hao.caibaojian.com&utm_source=hao.c ...

  5. [xpath] 定位中starts-with、contains和text()的用法

    starts-with 顾名思义,匹配一个属性开始位置的关键字 contains 匹配一个属性值中包含的字符串 text() 匹配的是显示文本信息,此处也可以用来做定位用 eg //input[sta ...

  6. 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 ...

  7. powerdesigner去掉网格线

    powerdesigner去掉网格线 去掉网格线

  8. CF 1133B Preparation for International Women's Day

    题目链接:http://codeforces.com/problemset/problem/1133/B 题目分析 读完题目,凡是先暴力.....(不用想,第四组数据就TLE了,QAQ) 当两个数的和 ...

  9. 十进制快速幂(牛客多校第五场)-- generator 1

    思路: 十进制快速幂. #include <stdio.h>//sprintf #include <cstdlib>////malloc exit strcat itoa sy ...

  10. golang 组装返回json数据,提供api接口

    model里 package model type Setting struct { Key string `gorm:"primary_key" json:"key&q ...