前言

关于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. 保存cookie 到本地

    #encoding: utf-8 from urllib import requestfrom http.cookiejar import MozillaCookieJar #创建一个cookieja ...

  2. Akka简介与Actor模型(一)

    前言...... Akka是一个构建在JVM上,基于Actor模型的的并发框架,为构建伸缩性强,有弹性的响应式并发应用提高更好的平台.本文主要是个人对Akka的学习和应用中的一些理解. Actor模型 ...

  3. 访问https接口报错 基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系

    详细错误信息如下 请求错误信息:发生一个或多个错误.System.Net.Http.HttpRequestException: An error occurred while sending the ...

  4. MSF魔鬼训练营-3.5.3 MSF中常用的关于数据库的命令

    渗透测试数据库用来保存渗透测试过程中获取的各种数据,很多时候你重启了kali发现连接不上数据库了,其实就是因为这个服务没开 MSF所使用的数据库时postgresql root@kali:/# ser ...

  5. java 统计素数个数问题

    题目:判断101-200之间有多少个素数,并输出所有素数. 程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除,则表明此数不是素数,反之是素数. package Study ...

  6. [转帖]国产CPU性能最全盘点 宜良性竞争优胜劣汰

    国产CPU性能最全盘点 宜良性竞争优胜劣汰 电子工程专辑的网站内容 其实里面说的不尽全面 比如龙芯和申威就放到一块了 一个是 MIPS 一个是Alpha 明显不一样的东西 x86的应该都不行 而且. ...

  7. DBGridEh列宽自动适应内容的简单方法

    ///////Begin   Source      uses          Math;            function   DBGridRecordSize(mColumn:   TCo ...

  8. Android SDK安装与环境配置

    一.单独下载只有sdk的包,SDK不包括在Android Studio里,适用于不需要Android Studio的用户,其他可自行去官网下载. 1:Android SDK (https://www. ...

  9. java中的重写总结

    这个理解了就挺容易的~~ 我就直接贴个程序啦 ,程序里有说明!! 父类: package ParentAndSon; public class Parent extends Object {//4:以 ...

  10. Intel Coleto Creek SSL chipset

    Intel Coleto Creek SSL chipset name type interface speed model SR-IOV driver Intel SSL chipset Colet ...