【问题标题】:ionic 2 open google maps with directions from 2 locationsionic 2 打开谷歌地图,带有来自 2 个位置的方向
【发布时间】:2018-03-26 14:16:47
【问题描述】:

当我单击一个按钮并显示来自源位置和目标位置的方向时,我需要打开谷歌地图。通过大量搜索,我找到了使用 InAppBrowser 的方法,但它不起作用。

这是我找到的代码:

  this.geolocation.getCurrentPosition().then((data) => {
      let lat = data.coords.latitude;
      let lng = data.coords.longitude;
      let bro = new InAppBrowser;

      if (this.platform.is('ios')) {
        bro.create('geo://?q=&saddr=' + data.coords.latitude + ',' + data.coords.longitude + '&daddr=' + this.dataitem['lat'] + ',' + this.dataitem['lng'], '_system');
      };
      if (this.platform.is('android')) {
        bro.create('geo://?q=' + data.coords.latitude + ',' + data.coords.longitude + '&daddr=' + this.dataitem['lat'] + ',' + this.dataitem['lng'] + '', '_system');
      };
  }).catch((err) => {
      console.log(JSON.stringify(err));
  });

有人可以帮忙吗?

【问题讨论】:

  • 您是否尝试过使用IonicNative 完成此任务?这可能比尝试使用浏览器的查询字符串来做这件事更可取。

标签: google-maps typescript ionic-framework ionic2 directions


【解决方案1】:

安装Launch Navigator插件:

  1. 安装 Cordova 和 Ionic Native 插件:

离子科尔多瓦插件添加 uk.co.workingedge.phonegap.plugin.launchnavigator

npm install --save @ionic-native/launch-navigator

  1. 将 LaunchNavigator 添加到 app.module.ts

  2. 将此代码添加到您的 ts 文件中:

    source: any = [22.303894, 70.802160] // source lat,long
    destination: any =  [23.022505, 72.571362] // dest lat,long
    
    navigate(){
    
    let options: LaunchNavigatorOptions = {
       start: this.source
    };
    
     this.launchnavigator.navigate(this.destination, options)
       .then(
        success => alert('Launched navigator'),
        error => alert('Error launching navigator: ' + error)
     );
    }
    

完成!

【讨论】:

    【解决方案2】:

    使用它打开地图,确保安装了 In App Browser 插件。

    let destination = latitude + ',' + longitude;
    
    if(this.platform.is('ios')){
      window.open('maps://?q=' + destination, '_system');
    } else {
     let label = encodeURI('My Label');
     window.open('geo:0,0?q=' + destination + '(' + label + ')', '_system');
    }
    

    Reference

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-01-13
      • 2016-09-08
      • 1970-01-01
      • 2017-10-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多