如何使用async await或者promise代替定時(shí)器呢？

使用的百度地圖。必須先使用百度地圖獲取目標(biāo)位置和使用百度地圖獲取目標(biāo)位置，然后在通過百度地圖的獲取我和目標(biāo)的位置。由于異步的原因，所以我使用了定時(shí)器解決，不過性能肯定不好，如何使用async await或者promise代替定時(shí)器呢？

代碼片段如下：

    // 獲取目標(biāo)位置
    var myGeo = new BMap.Geocoder();
    // 根據(jù)中地址名 查經(jīng)緯度
    myGeo.getPoint(scope.targetname, function(point){
        if (point) {
            scope.target = point;
        }else{
            toast("您選擇地址沒有解析到結(jié)果!");
        }
    }, scope.cityname);


// 獲取我的位置
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            // alert('您的位置：'+r.point.lng+','+r.point.lat);
            
            scope.myadd = new BMap.Point(r.point.lng,r.point.lat);
             // console.log(scope.myadd,"我的位置")
        }
        else {
            alert("定位失敗");
        }        
    },{enableHighAccuracy: true})
    


   
    
// 獲取我和目標(biāo)的位置

    setTimeout(function(){
        if(scope.myadd!=""&&scope.target!=""){
          
            var map = new BMap.Map("l-map");
            map.centerAndZoom(new BMap.Point(scope.target.lng,scope.target.lat), 11);
            var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
            walking.search(scope.myadd, scope.target);
        }
    }, 1000);

回答

編輯回答

落殤

你可以把獲取地理位置的封裝成一個(gè)方法，返回一個(gè)promise對(duì)象，然后在外部解析的地址的方法用asny,await去取獲取地理位置的方法，這樣就可以實(shí)現(xiàn)同步了。

2017年11月30日 15:55

編輯回答

愿如初

簡單來說這樣做（以下是偽代碼）：

async getMyAndTargetPosition() {
  const target = await getPosition(target);
  const me = await getPosition(me);
  return getPath(target, me);
}
getMyAndTargetPosition()
  .then(path => {
    // path
  });

2017年9月21日 06:25

編輯回答

涼心人

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地圖秘鑰"></script>
    <title>地址解析</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    
    
    
    // 將地址解析結(jié)果顯示在地圖上,并調(diào)整地圖視野
    // 
    var myGeo = new BMap.Geocoder();
    let promiseTarget = new Promise((resolve)=>{
        myGeo.getPoint("霍營", function(point){
            if (point) {
                resolve(point)
            }else{
                alert("您選擇地址沒有解析到結(jié)果!");
            }
        }, "北京市");
    })


    

    var geolocation = new BMap.Geolocation();
    let promiseLocation = new Promise((resolve)=>{
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                resolve(r.point)
            }
            else {
                alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})
    })


    Promise.all([promiseTarget,promiseLocation]).then(([target,location])=>{
        console.log(target,location,5)
            // 百度地圖API功能
        var map = new BMap.Map("allmap");
        map.centerAndZoom("北京",12);  //初始化地圖,設(shè)置城市和地圖級(jí)別。
        alert('從大渡口區(qū)到江北區(qū)的距離是：'+(map.getDistance(target,location)).toFixed(2)+' 米。');  //獲取兩點(diǎn)距離,保留小數(shù)點(diǎn)后兩位
        var polyline = new BMap.Polyline([target,location], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定義折線
        map.addOverlay(polyline);     //添加折線到地圖上
    })


</script>

2017年9月16日 23:33