uniappH5中使用高德API

高德的API有现成的SDK支撑安卓/IOS  但是没有专门的API支撑H5（或者说不用专门支撑）

当uniapp中调用高德API的时候就会遇到问题:

因为直接用<sctipt>引入外部js肯定不行了

所以为了解决这个问题就必须引入在线jsAPI

下面就介绍步骤

1.引入在线jsAPI   专门新建个工具类，这样当需要调用地图的时候直接引用该方法就行

a.直接引用js肯定不行，所以采用回调函数的方式引入

b.因为高德的API是异步的，所以我们把他封装成Promise函数

export default function MapLoader() {
  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 = "https://webapi.amap.com/maps?v=1.4.15&key=你的key&callback=initAMap";
		script.onerror = reject;
		  document.head.appendChild(script);
    }
    window.initAMap  = () => {
      resolve(window.AMap);
    };
  });
}

注意：key值换成自己的哈

2.引入工具类

import AMap from "../util/AMap.js"

3.加载API

return {
				 map: null,
				 resAmap:null,
				 scrollH:500,
				 scrollW:500,
				 initLat:39.913423,//初始维度
				 initLng:116.368904,//初始经度
				
			}

onLoad() {
			 this.initAMap();
		},

async initAMap() {
					  try {
						  this.resAmap=await AMap();
						  this.$nextTick(function(){
						   
						  	var map = new this.resAmap.Map('map', {
						  		   center:[this.initLng,this.initLat],
						  		   zoom:13
						  		});
						   this.map=map;
						  
						  })
						}catch(e){
							console.log(e)
						}
					},

最重要的事情是一定要将调用方法放到$nextTick中，因为这样才能保证完全请求完成才调用（具体原因参见Vue）