vue异步加载高德地图的实现

2024-10-19 05:39:00

本文介绍了vue异步加载高德地图的实现，分享给大家，具体如下：

几种加载js的方式

同步加载
异步加载
延迟加载
同步加载

用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。

<script src="http://webapi.amap.com/maps?v=1.4.7&key=您申请的key值"></script>

异步加载

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

动态创建script标签

  let script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "//webapi.amap.com/maps?v=1.4.6&key="+key+"&callback=init";
  script.onerror = reject;
  document.head.appendChild(script);

新的<script>元素加载 file1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程，充分的利用了浏览器的多进程，但要注意，浏览器不保证文件加载的顺序。

defer属性

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

async属性

async的定义和用法(是HTML5的属性)，async 属性规定一旦脚本可用，则会异步执行。
如果没有async和defer属性，那么浏览器会立即执行当前的js脚本，阻塞后面的脚本；如果有async属性，加载和渲染后续文档元素的过程将和当前js的加载与执行并行进行（异步）；如果有defer属性，那么加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素（DOM）解析完成之后，DOMContentLoaded 事件触发之前完成。

引入高德地图的方式

顺序同步加载

这种方式下，地图初始化的代码要放在 JS API 的脚本标签之后：

<script src="http://webapi.amap.com/maps?v=1.4.7&key=您申请的key值"></script>
<script type="text/javascript">
  var map = new AMap.Map('container', {
    center:[117.000923,36.675807],
    zoom:11
  });
</script>

这种方式有缺点很明显，1：会导致加载页面变得很慢；2：单页应用的页面，如果页面中虽然用不到地图，但是也会加载这个js文件，这是没有必要的。

异步加载

异步加载指的是为 JS API 指定加载的回调函数，在 JS API 的主体资源加载完毕之后，将自动调用该回调函数。回调函数应该声明在 JS API 入口文件引用之前，异步加载可以减少对其他脚本执行的阻塞，HTTPS 下我们也建议使用异步方式：

<script type="text/javascript">
  window.init = function(){
    var map = new AMap.Map('container', {
      center:[117.000923,36.675807],
      zoom:11
    });
  }
</script>
<script src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&callback=init"></script>

或者

window.onLoad = function(){
  var map = new AMap.Map('container');
}
var url = 'http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&callback=onLoad';
var jsapi = doc.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

vue项目中引入高德地图

如何在vue的组件化开发中引入高德地图呢？我写了一个loadMap.js文件

export function MP(key) {
 return new Promise(function (resolve, reject) {
  window.init = function () {
   resolve(AMap)
  };
  let script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "//webapi.amap.com/maps?v=1.4.6&key="+key+"&callback=init";
  script.onerror = reject;
  document.head.appendChild(script);
 })
}

然后在用到高德地图的vue的组件中

import {MP} from '../../../utils/loadMap';
MP('d275691902d1744cad9a7ddc1fc20657').then(function (AMap) {
 that.errNetwork = false;
 initAMapUI(); //这里调用initAMapUI初始化
 that.initMap(AMap);
}).catch(err=>{
 that.errNetwork = true;
})

小坑

在这儿我不仅用到了高德地图，还用到的地图的UI库。在高德地图JavaScript API之后引入UI组件库的入口文件：

同步方式：

<!--引入高德地图JSAPI -->
<script src="https://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

<!--引入UI组件库（1.0版本） -->
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>

异步方式

<!--异步加载 高德地图JSAPI ，注意 callback 参数-->
<script src="https://webapi.amap.com/maps?v=1.3&key=您申请的key值&callback=my_init"></script>

<!--引入UI组件库异步版本main-async.js（1.0版本） -->
<script src="https://webapi.amap.com/ui/1.0/main-async.js"></script>

<script type="text/javascript">
//JSAPI回调入口
function my_init() {
    initAMapUI(); //这里调用initAMapUI初始化
    //其他逻辑
}
</script>

关键是UI库依赖于地图js文件，在这里，我们可以js加载完的回调onload函数和promise.all()函数来实现。loadMap.js文件如下：

export function MP(key) {
 const p1 = new Promise(function (resolve, reject) {
  window.init = function () {
   console.log('script1-------onload');
   resolve(AMap)
  };
  let script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "//webapi.amap.com/maps?v=1.4.6&key="+key+"&callback=init";
  script.onerror = reject;
  document.head.appendChild(script);
 });
 const p2 = new Promise(function (resolve,reject) {
  let script2 = document.createElement("script");
  script2.type = "text/javascript";
  script2.src = "//webapi.amap.com/ui/1.0/main-async.js";
  script2.onerror = reject;
  script2.onload = function(su){
   console.log('script2-------onload',su);
   resolve('success')
  };
  document.head.appendChild(script2);
 });
 return Promise.all([p1,p2])
  .then(function (result) {
   console.log('result----------->',result);
   return result[0]
  }).catch(e=>{
   console.log(e);})
};

promise.all中的then的成功回调返回rusult是一个数组，分别代表p1和p2的结果，这里只返回p1的结果（map对象）就可以了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue项目中使用百度地图的方法

1.在百度地图申请密钥: http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {
vue调用高德地图实例代码

一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是页面直接引入复制代码代码如下: <script type="text/javascript" src=&q
浅谈Vue下使用百度地图的简易方法

Vue下使用百度地图的简易方法,分享给大家,具体如下: 最近的项目里面,需要用到将具体地址转换成百度坐标系的经纬度,需求比较简单,所以就没有采用GitHub里面的百度Vue插件. 废话不说,直接贴出代码: 引入:在需要用到百度地图的组件里面直接引入 export default { methods: { loadBMapScript () { let script = document.createElement('script'); script.src = 'http://api.map.b
vue基于Vue2.0和高德地图的地图组件实例

前言在做基于LBS的应用中,时常会和地图打交道,最直接的解决方案,当然是去对应的地图官网找文档,然后一步步来玩.对于简单场景而言,体验应该还好,但对于一些状态多,变化频繁的复杂场景而言,不仅要时刻维护本地数据状态和地图状态同步,还要查找设置各种状态的地图API,实在是让人头疼的事情. 设计vue-amap的初衷,也就是为了让开发者,在编写地图应用时,能从查找众多地图API和繁琐的地图状态同步中解脱出来. 那么vue-amap是如何做到的,又能给开发者带来怎样的便利与开发体验呢?我们就从一个轻点
详解vue.js下引入百度地图jsApi的两种方法

前言今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script> 这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们
vue+vuex+axios+echarts画一个动态更新的中国地图的方法

本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法,分享给大家,具体如下: 一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save
详解vue项目中调用百度地图API使用方法

步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"
vue高德地图之玩转周边

前言:在之前的博客中,有成功引入高德地图,这是以前的地址 vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看我的github 一 .先看要实现的结果,参考了链家的周边,如图所示. 二 .原理分析 1.引入高德api,这个在之前的博客提到过,vue 调用高德地图. 2.使用地图的周边插件,这是高德网站的api. AMap.PlaceSearch //地点搜索服务插件,提供某一特定地区的位置查询服务在插件中的各种方法中选取了searchNearBy的
Map.vue基于百度地图组件重构笔记分享

Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,
Vue的百度地图插件尝试使用

百度地图插件安装 CDN全局安装 <script src="https://unpkg.com/vue-baidu-map"></script> 插件的引入 Vue.use(VueBaiduMap.default, { ak: 'YOUR_APP_KEY', }) ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apico... 地图视图 BmView 是用于渲染百度地图实例可视化区域的容器使用 Bmview 渲

vue异步加载高德地图的实现

相关推荐

随机推荐