角度谷歌地图方向 - 如何绑定起点和目的地答案

【问题标题】：Angular google map direction - how to bind origin and destination角度谷歌地图方向 - 如何绑定起点和目的地
【发布时间】：2018-09-17 10:15:24
【问题描述】：

我正在使用下面的代码来绑定起点和终点 - 纬度和经度。在获取原点（当前位置）和目的地（我从标记单击获取值）后，我将参数传递给 url 并尝试打开新选项卡。问题是参数没有传递到谷歌地图网址。

getDirection(dirLat: any, dirLng: any) {
    let srcLat, srcLng;
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
      srcLat = position.coords.latitude;
      srcLng = position.coords.longitude;
      });
    }
    this.dir = {
      origin: { latitude: 29.9809683, longitude: 31.3377553 },
      destination: { latitude: dirLat, longitude: dirLng }
    };


   // prints the values correctly for origin and destination{latitude: 29.9809683, longitude: 31.3377553}

    console.log('originDest', this.dir.origin, this.dir.destination);
    //in the below url, dir.origin and dir.destination does not get the values
    window.open('https://www.google.com/maps/dir/?api=1&origin={{dir.origin}}&destination={{dir.destination}}&travelmode=driving', '_blank');

  }

【问题讨论】：

标签： angular google-maps

【解决方案1】：

 var p ='origin';
     var d = 'destination';
     window.open('https://www.google.com/maps/dir/?api=1&origin='+p+'&destination='+d+'&travelmode=driving','_blank' );

你可以这样绑定起点和终点

【讨论】：

【解决方案2】：

getCurrentPosition 异步尝试获取设备的当前位置。

由于异步特性，控制台日志显示正确的值。在这里阅读深入的解释 Weird behavior with objects & console.log

在此处阅读有关地理位置 api 的更多详细信息 https://w3c.github.io/geolocation-api/#geolocation_interface

【讨论】：

我的问题不在于 console.log。它与 URL 相关 - 来源和目的地的值没有传递到 URL