HarmonyOS 有关地图轨迹的问题？

Question

现有的App有这样一个地图相关的页面，有一个数组，存放多个坐标，根据数组的索引，在地图上添加marker，并显示当前的索引数+1，点击marker显示信息窗，按照数组索引顺序画折线，请问怎么实现？

Answer 1

点击marker显示信息窗请参考以下代码示例：

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

@Entry
@Component
struct MarkerDemo {
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback;
  private marker?: map.Marker;

  aboutToAppear(): void {
    // 地图初始化参数 
    this.mapOptions = {
      position: {
        target: { latitude: 31.984410259206815, longitude: 118.76625379397866 },
        zoom: 15
      }
    };
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        // Marker初始化参数 
        let markerOptions: mapCommon.MarkerOptions = {
          position: {
            latitude: 31.984410259206815, longitude: 118.76625379397866
          },
          rotation: 0,
          visible: true,
          zIndex: 0,
          alpha: 1,
          anchorU: 0.5,
          anchorV: 1,
          clickable: true,
          draggable: true,
          flat: false
        }; // 创建Marker 
        this.marker = await this.mapController.addMarker(markerOptions);
        // 设置标记可拖拽 
        this.marker.setDraggable(true);
        // 设置标记锚点 
        this.marker.setMarkerAnchor(1.0, 1.0);
        // 设置信息窗的标题 
        this.marker.setTitle('南京');
        // 设置信息窗的子标题 
        this.marker.setSnippet('华东地区');
        // 设置信息窗的锚点位置 
        this.marker.setInfoWindowAnchor(1, 1);
        // 设置信息窗可见 
        this.marker.setInfoWindowVisible(true);
      }
    };
  }

  build() {
    Stack() {
      Column() {
        MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
      }.width('100%')
    }.height('100%')
  }
}

通过marker绘制轨迹，请参考：

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
import { navi } from '@kit.MapKit';
@Entry
@Component
struct NaviPage {
  private TAG = "HuaweiMapDemo";
  private mapOption?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  addMarker(latLng:mapCommon.LatLng){
    let markerOptions: mapCommon.MarkerOptions = {
      position: {
        latitude: latLng.latitude,
        longitude: latLng.longitude
      },
      rotation: 0,
      visible: true,
      zIndex: 0,
      alpha: 1,
      anchorU: 0.5,
      anchorV: 0.5,
      clickable: true,
      draggable: true,
      flat: false
    };
    console.log(this.TAG, "markerOptions=" + JSON.stringify(markerOptions));
    this.mapController?.addMarker(markerOptions);
  }
  aboutToAppear(): void {
    // 地图初始化参数，设置地图中心点坐标及层级
    this.mapOption = {
      position: {
        target: {
          latitude: 39.9,
          longitude: 116.4
        },
        zoom: 10
      },
      myLocationControlsEnabled: true
    };
    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        // 获取地图的控制器类，用来操作地图
        this.mapController = mapController;
        this.mapController.on("mapLoad", () => {
          console.info(this.TAG, `on-mapLoad`);
        });
        let bounds:mapCommon.LatLngBounds = {
          northeast: {
            latitude: 39.96,
            longitude: 116.4
          },
          southwest: {
            latitude: 39.85918782288658,
            longitude: 116.321356557687
          }
        };
        let center: mapCommon.LatLng = map.LatLngBoundsUtils.getCenter(bounds);
        let resultBounds: mapCommon.LatLngBounds = map.LatLngBoundsUtils.include(center, bounds);
        console.info("resultBounds", "resultBounds：northeast: {" + resultBounds.northeast.latitude + "," + resultBounds.northeast.longitude + "}，southwest：{" + resultBounds.southwest.latitude + "," + resultBounds.southwest.longitude + "}");
        let cameraUpdate :map.CameraUpdate = map.newLatLngBounds(resultBounds, 100);
        // 移动相机
        this.mapController.moveCamera(cameraUpdate);
        let latLngs: Array<mapCommon.LatLng> = [{
          latitude: 39.85918782288658,
          longitude: 116.351356557687
        },{
          latitude: 39.90,
          longitude: 116.4
        }, {
          latitude: 39.88,
          longitude: 116.351356557687
        }, {
          latitude: 39.94,
          longitude: 116.4
        }];
        this.addMarker(latLngs[0]);
        this.addMarker(latLngs[1]);
        this.addMarker(latLngs[2]);
        this.addMarker(latLngs[3]);
        let params: navi.DrivingRouteParams = {
          origins: [latLngs[0]],
          destination: latLngs[3],
          language: "zh_CN"
        };
        try {
          const result = navi.getDrivingRoutes(params);
          result.then((result)=>{
            // 获取路线的折线经纬度列表
            let points: Array<mapCommon.LatLng> = []
            result.routes[0].steps.forEach((step)=>{
              step.roads.forEach((road)=>{
                road.polyline.forEach((polyline)=>{
                  points.push(polyline)
                })
              })
            })
            console.info("naviDemo", "routes length" + result.routes.length);
            // polyline初始化参数
            let polylineOption: mapCommon.MapPolylineOptions = {
              points: points,
              clickable: true,
              startCap: mapCommon.CapStyle.BUTT,
              endCap: mapCommon.CapStyle.BUTT,
              geodesic: false,
              jointType: mapCommon.JointType.BEVEL,
              visible: true,
              width: 10,
              zIndex: 10,
              gradient: false
            }
            // 创建polyline
            this.mapController?.addPolyline(polylineOption);
          })
          console.info("naviDemo", "getDrivingRoutes success result =" + JSON.stringify(result));
        } catch (err) {
          console.error("naviDemo", "getDrivingRoutes fail err =" + JSON.stringify(err));
        }
      }
    };
  }
  build() {
    Stack() {
      // 调用MapComponent组件初始化地图
      MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback }).width('100%').height('100%');
    }.height('100%').alignContent(Alignment.TopStart)
  }
}