Question

如何在两个谷歌地图原生标记之间画一条线？在我的项目中，我需要一个动态标记和一个固定标记。

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

documentation for the Polyine class的cordova-plugin-googlemaps表示您要在标记之间添加折线，如下所示：

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
});

这将在标记之间绘制直线（测地线）。

然而，在你的问题中，你问过＆＃34;如何使用一条线＆＃34;显示两个标记之间的路线。旅行路线当然不像从A到B画直线那么简单 - 如果你想绘制一条详细的运输路线，那就更复杂了：

Google Maps Directions API可让您计算位置之间的路线并返回包含详细旅行路线的JSON响应，其中包括您可以直接绘制到地图上的encoded polyline路线。问题是Google API端点不支持CORS标头，因此如果您直接从Cordova应用程序发出请求，Webview将阻止响应。

相反，我建议在您的Cordova应用中添加Google Maps Javascript SDK（即使您使用原生Google地图插件来显示地图），因为这包括可以访问的directions service Google Maps Directions API并未受到CORS的禁止，因此可以在您的Cordova应用中使用。

与Google Maps Directions API端点类似，它会返回一个JSON响应，详细说明位置之间的行程路线，包括编码折线。您可以使用mapbox polyline等库轻松解码折线，然后在原生Google地图上将生成的坐标集绘制为折线，以显示详细的旅行路线。

如何在两个谷歌地图原生标记之间画一条线？（Ionic 3，cordova）

1 个答案:

如何在两个谷歌地图原生标记之间画一条线？ （Ionic 3，cordova）

1 个答案:

如何在两个谷歌地图原生标记之间画一条线？（Ionic 3，cordova）