高德地图 爬坑之旅

这一节主要是针对高德地图的定位来说，我的需求是利用高德地图来做详细的定位，那么因为它的定位是异步执行，并且定位成功后 做回调，这里我就在想，把数据拿出来，做全局共享。

因为是第一次接触，所以我傻乎乎的直接利用块作用域去取值，结果就是，在值还没有取回来之前，函数已经执行完毕，导致后面的数据并没有被返回，为此我为这个问题纠结了2个小时，在朋友的提示下，

异步

对的，异步，那么我尝试使用Promse来包容它的运行，然后在需要用到它的时候配合async/await来等待它完成取值，不言而喻。

完美解决了我取值的要求

export function Map(AMap){
  return new Promise((resolve,rejects) => {
    var map = new AMap.Map('container', {
      resizeEnable: true
    })
    map.plugin('AMap.Geolocation', function() {
      var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
        buttonOffset: new AMap.Pixel(10, 20),
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,     
        //  定位按钮的排放位置,  RB表示右下
        buttonPosition: 'RB'
      })
    
      geolocation.getCurrentPosition()
      AMap.event.addListener(geolocation, 'complete', onComplete)
      AMap.event.addListener(geolocation, 'error', onError)
    
    })
    function onComplete (data) {
      // data是具体的定位信息
      resolve(data);
    }
  
    function onError (data) {
      // 定位出错
      rejects(data);
    }

  })
}

使用

import {Map} from '../map/map';
 
 site = async () => {
    try {
      let result = await Map(window.AMap);
      console.log(result);
    } catch(err) {
      console.log(err);
    }
  }

 

获得完美的结果