Ionic 3(Cordova)中如何在Google Maps Native两标记间绘制线条？

嘿，这事儿不难搞定！核心思路是先保存两个标记的实例引用，然后利用Google Maps的Polyline API在它们之间绘制线条。下面一步步来实现：

1. 先保存标记的实例引用 #

首先你需要在组件里定义两个变量，用来存储动态标记和固定标记的实例，这样后面才能获取它们的位置信息：

import { Marker } from '@ionic-native/google-maps';

// 组件类内部添加
dynamicMarker: Marker;
fixedMarker: Marker;
// 如果需要后续更新线条，还可以保存线条实例
line: Polyline;

然后修改你现有的addMarker和addMarker2方法，把创建好的标记赋值给这两个变量：

addMarker() {
  this.map.addMarker({
    title: '动态标记',
    icon: 'blue',
    animation: 'DROP',
    position: { lat: this.place.lat, lng: this.place.lng }
  }).then(marker => {
    this.dynamicMarker = marker; // 保存动态标记引用
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('动态标记被点击');
    });
    // 检查固定标记是否已创建，若已创建则立即触发画线
    if (this.fixedMarker) {
      this.drawLineBetweenMarkers();
    }
  });
}

addMarker2() {
  // 这里填入你的固定标记位置，示例用北京坐标
  const fixedPosition = { lat: 39.9042, lng: 116.4074 };
  this.map.addMarker({
    title: '固定标记',
    icon: 'red',
    animation: 'DROP',
    position: fixedPosition
  }).then(marker => {
    this.fixedMarker = marker; // 保存固定标记引用
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('固定标记被点击');
    });
    // 检查动态标记是否已创建，若已创建则立即触发画线
    if (this.dynamicMarker) {
      this.drawLineBetweenMarkers();
    }
  });
}

2. 实现画线核心方法 #

接下来编写专门的画线方法，调用Google Maps的addPolyline接口，传入两个标记的位置作为路径：

import { Polyline } from '@ionic-native/google-maps';

// 组件类内添加画线方法
drawLineBetweenMarkers() {
  if (!this.dynamicMarker || !this.fixedMarker) {
    console.warn('两个标记未全部创建完成，暂时无法画线');
    return;
  }

  this.map.addPolyline({
    points: [
      this.dynamicMarker.getPosition(),
      this.fixedMarker.getPosition()
    ],
    color: '#FF0000', // 线条颜色，这里用红色
    width: 5, // 线条宽度
    geodesic: true // 是否沿地球曲面绘制，适合长距离路线
  }).then(polyline => {
    console.log('线条绘制完成');
    this.line = polyline; // 保存线条实例，方便后续更新
  });
}

3. 额外优化：动态更新线条 #

如果你的动态标记位置会变化（比如支持拖动），可以监听标记的位置变化事件，实时更新线条：

// 在addMarker的then回调里添加拖动监听
marker.on(GoogleMapsEvent.MARKER_DRAG_END).subscribe(async () => {
  if (this.line) {
    const newPoints = [
      await this.dynamicMarker.getPosition(),
      await this.fixedMarker.getPosition()
    ];
    this.line.setPoints(newPoints);
  }
});

内容的提问来源于stack exchange，提问作者jamesharvey