vue-某个特定页面异步加载高德地图的方式

1 高德官网相关知识点：

高德官网给出的异步加载的方式说明：https://lbs.amap.com/api/javascript-api/guide/abc/load

demo:https://lbs.amap.com/fn/jsdemo_loader/?url=http%3A%2F%2Fwebapi.amap.com%2Fdemos%2Fload%2Fload2.html

js使用方式：

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

2 在某一页面，比如multipleMain.vue中引入高德地图的业务逻辑：

vue的页面结构是<template>   <script>     <style>，我们该如何按照上面的逻辑引入高德地图呢？

• 1、把引入高德地图的功能放在created()中去实现
• 2、把高德js加载完成的回调方法initMap()【实现地图的初始化】写在前面
• 3、把js引入到body中，也可以引入到head中

注意：每次进multipleMain.vue时都会引入js，如果不加限制会加载多个js，写个方法isLoadMapJS()用来判断是否已经加载了js，如果已经加载了，不需要重复加载，没加载再进行加载

3 实现方式如下：

• 1、created()中的异步加载高德地图的逻辑：

created(){
  // 1 异步加载地图的次数
  let _count=this.isLoadMapJS();
  // 2 没有加载高德在线js
  if(_count==0){
    // 2.1 高德js加载完成的回调-初始化地图
    window.onLoad=()=>{
      this.initMap()
    };
    // 2.2 把js引入到body中，引入到head中也可以
    var script=document.createElement("script"); 
    script.setAttribute("type", "text/javascript"); 
    script.setAttribute("src", "https://webapi.amap.com/maps?v=1.4.15&key=e64fe5fe747de3b6897932dfbdb340d4&callback=onLoad"); 
    var body = document.getElementsByTagName("body"); 
    if(body.length) {
      body[0].appendChild(script); 
    }else {
      document.documentElement.appendChild(script);  
    }
  }else{
    // 3 已经加载过，直接初始化地图即可，不需要再次引入js
    setTimeout(()=>{
      this.initMap();
    }, 500);
  }  
},

• 2、判断加载次数的方法

// 判断是否加载了mapjs
isLoadMapJS(){
  let count=0;
  var scriptsArr = document.getElementsByTagName("script"); 
  for(let i=0;i<scriptsArr.length;i++){
    let one=scriptsArr[i];
    if(one.src.indexOf("https://webapi.amap.com/maps")>-1){
      count+=1
    }
  }
  return count;
},

• 3、初始化地图

// map.1 初始化地图
initMap(){
  console.log("AMap===",AMap);
  if(AMap){
    map = new AMap.Map('container', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      center:this.strToLngLat(this.location.startLocation), 
      zoom:10, //初始化地图层级
    });
    map.on("complete", function(res){
      console.log("res===",res);  
      console.log("地图加载完成！");  
    });
  }else{
    Toast("当前网络有问题，请稍后再试！");
  }
},