前言

关于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. 业务型代码常用的SQL汇总(随时更新)

    做了一年的业务代码开发,记录并分享一下自己平时在项目中遇到的比较好用的sql 1.查询表中是否某一字段下的数据有重复数据(以ID为例) SELECT id FROM 表名GROUP BY ID HAV ...

  2. 大觅网02Day

    docker环境搭建:(注:请先完成上一次的环境搭建) A.部署环境(导入上次系统的时候修改虚拟机的内存) 1.安装系统自带版本Docker:apt-get install docker.io 2.查 ...

  3. netcore程序部署 docker 异常 --生成图片二维码缺少libdl

    最近因业务需求需要在程序中实现二维码图片生成,于是就用到QRCoder开发库.最终在windows环境下部署运行没问题,但切换到docker(centos7.0)后发现是有问题的. 错误信息提示:Th ...

  4. 强化学习复习笔记 - DEEP

    Outline 激活函数 使用逼近器的特点: 较少数量的参数表达复杂的函数 (计算复杂度) 对一个权重的调整可以影响到很多的点 (泛化能力) 多种特征表示和逼近器结构 (多样性) 激活函数 Sigmo ...

  5. jmeter—获取当前时间(年、月、日),往前/往后n天

    import java.util.Calendar; Calendar cal = Calendar.getInstance(); int day = cal.get(Calendar.DATE); ...

  6. 菜鸟系列k8s——k8s集群部署(2)

    k8s集群部署 1. 角色分配 角色 IP 安装组件 k8s-master 10.0.0.170 kube-apiserver,kube-controller-manager,kube-schedul ...

  7. [转帖]Docker常用命令总结

    Docker常用命令总结 http://www.ha97.com/5546.html 发表于: Linux, 互联网, 虚拟化与云计算 | 作者: 博客教主 标签: docker,常用命令,总结 PS ...

  8. 算法 - k-means算法

    一.聚类思想 所谓聚类算法是指将一堆没有标签的数据自动划分成几类的方法,属于无监督学习方法,这个方法要保证同一类的数据有相似的特征,如下图所示:     根据样本之间的距离或者说是相似性(亲疏性),把 ...

  9. 关于Faster-RCNN训练细节

    Faster RCNN训练: 四部训练法: Faster R-CNN,可以大致分为两个部分,一个是RPN网络,另一个是Fast R-CNN网络,前者是一种候选框(proposal)的推荐算法,而后者则 ...

  10. server001