如何在两个Google Map本机标记之间划一条线？（科尔多瓦离子3号）

Question

如何在两个Google Maps本机标记之间划一条线？在我的项目中，我需要一个动态标记和一个固定标记。

addMarker() {
  this.map.addMarker({
    title: 'My Marker',
    icon: 'blue',
    animation: 'DROP',
    position: {
      lat: this.place.lat,
      lng: this.place.lng
    }
  })
  .then(marker => {
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('Marker Clicked');
    });
  });
}

第二标记：

addMarker2() {
          this.map.addMarker({
            title: 'My Marker',
            icon: 'blue',
            animation: 'DROP',
            position: {
              lat: -33,
              lng: 773231
            }
          })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
              alert('Marker Clicked');
            });
          });
        }

怎样用一条线显示两个标记之间的路线？

提前致谢，

Answer 1

在为Polyine类文档的科尔多瓦-插件-谷歌地图显示你添加标记这样之间的折线：

let points = [
    {
      lat: this.place.lat,
      lng: this.place.lng
    },
    {
      lat: -33,
      lng: 773231
    }
];

this.map.addPolyline({
    points: points,
    'color' : '#AA00FF',
    'width': 10,
    'geodesic': true
});

这将在标记之间绘制一条直线（大地）。

但是，在您的问题中，您问过“如何用线显示两个标记之间的路线”。当然，旅行路线并不像从A到B画一条直线那么简单-如果您想绘制详细的运输路线，则要复杂一些：

在谷歌地图API路线使您能够计算位置和返回包含一个详细的旅游路线，包括一个JSON响应之间方向上的编码折线，您可以直接绘制到地图中的路线。问题是Google API端点不支持CORS标头，因此，如果您直接从Cordova应用发出请求，则Webview将阻止响应。

因此，我建议您在您的Cordova应用程序中包括Google Maps Javascript SDK（即使您使用的是本地Google Maps插件来显示地图），因为这包括可以访问Google Maps Directions API 的路线服务由CORS制作，因此可以在您的Cordova应用中使用。

与Google Maps Directions API端点类似，它返回JSON响应，详细说明位置之间的旅行路线，包括编码的折线。您可以使用诸如Mapbox折线之类的库轻松解码折线，然后在本机Google Map上将所得的坐标集绘制为折线，以显示详细的旅行路线。