如何使用谷歌地图和离子设置航点行程

Posted 2023-03-16

【中文标题】如何使用谷歌地图和离子设置航点行程

【英文标题】：how to set waypoint itinerary with google maps and ionic

【发布时间】：2020-05-03 08:21:25

【问题描述】：

我需要在屏幕上显示一张地图，上面有我要去的地方的路线。

我需要它按顺序显示，并让地图按顺序显示我需要去的地方的完整路线。

我知道可以创建标记，但我想在地图上按顺序创建点，从起始位置和结束位置开始，可能有多个位置，但我希望地图跟踪访问序列中的位置。

我在 Google Maps API 文档中没有找到任何允许我执行此操作的内容，是否可以执行此操作？

【问题讨论】：

我相信您应该开始检查路线服务文档：developers.google.com/maps/documentation/javascript/directions

【参考方案1】：

在这个例子中，我已经完成了地图需要去的 2 个航点，然后用它们渲染地图，解决了 TSP 问题（旅行商问题）

loadMap()
  // create a new map by passing htmlElement
  let mapEle: HTMLElement = document.getElementById('map_canvas');
  let directionsService = new google.maps.DirectionsService();
  let directionsDisplay = new google.maps.DirectionsRenderer();

  // create map
  this.map = new google.maps.Map(mapEle, 
    center: this.start,
    zoom: 13
  );

  directionsDisplay.setMap(this.map);

    var request = 
      origin:lat: -34.6496604, lng: -58.4047352,
      destination:lat: -34.650078, lng: -58.402425,
      waypoints: //your array of waypoints, example [
                       location:lat: -34.597353,lng: -58.415832,
                       stopover: true
                   ,
                   
                       location:lat: -34.608441,lng: -58.406194,
                       stopover: true
                    ],
      optimizeWaypoints:true,
      provideRouteAlternatives: false,
      travelMode: 'DRIVING'
    ;
    directionsService.route(request, function(response, status) 
      if (status == 'OK') 
        directionsDisplay.setDirections(response);
      
    );

使用谷歌地图的 Javascript API 解决，更多信息请查看：https://developers.google.com/maps/documentation/javascript/directions

【讨论】：

你好，我想用cordova插件做同样的事情，但我不知道它是否有DirectionsService，我不知道我是否可以使用@ionic-native/谷歌地图。

我用过那个包` "@ionic-native/google-maps": "^4.9.1" `，你测试了吗？

我在文档中看到它说DirectionsService 不可用，这是真的吗？因为如果是的话，我只能用JavaScript来实现。

您是否尝试过复制粘贴我添加的代码？Typescript 是对 JS 的修改，因此代码可以运行，这是我的应用程序的一段代码，现在可以运行。

它可以工作，但我想知道您是否可以将方向服务与cordova插件一起使用，但似乎这是不可能的。