前言

HarmonyOS NEXT版本的api11和以前我们使用的api9相比，多了很多实用的api接口，我用的最多的是map kit，在官方的案例中，给的在地图上面的只是非常简单的一条折现。

今天向大家分享使用map kit中输入起点和终点就可以在地图上标记一条导航路线的一个小案例，类似于这个样子

实现

绘制折现

绘制折现的逻辑呢在官方文档上面有，就是将一个个坐标点连接起来

let polylineOption: mapCommon.MapPolylineOptions = {
	      // 坐标点集合
          points: [{longitude:118.78,latitude:31.975}, {longitude:118.78,latitude:31.982}, {longitude:118.79,latitude:31.985}],
          clickable: true,
          startCap: mapCommon.CapStyle.BUTT,
          endCap: mapCommon.CapStyle.BUTT,
          geodesic: false,
          jointType: mapCommon.JointType.BEVEL,
          visible: true,
          width: 10,
          zIndex: 10,
          gradient: false
        }

所以我们要是想得到导航路线，就需要得到起始点和终点的路线的坐标点集，恰巧，在map kit的navi的api中，可以得到我们需要的坐标点集
但是我们navi的api中，导航的起始点和终点输入的并非我们的地名，而是起始点的坐标点，所以这个时候，我们就需要将我们的地名先转化为坐标点

将地点转化为坐标点

这段逻辑输入地点名称，便会返回这个地点的坐标信息，用于后续导航的搜索

  async search(place: string): Promise<mapCommon.LatLng> {
    let params: site.SearchByTextParams = {
	// 输入的地点信息
      query: place,
	// 搜索半径
      radius: 10000,
	// 输入语言
      language: "en"
    };	
	// 获取到的位置信息
    const result: site.SearchByTextResult = await (site.searchByText(params));
	// 因为是个简单的例子，所以只取第一个位置的信息
    return result.sites![0].location as mapCommon.LatLng
  }

根据起始坐标点获取折线坐标集

这段逻辑则是返回我们的导航的折现坐标点用与后续我们绘制折线的使用

  // 获取导航路线
  async navigation_directions(start: mapCommon.LatLng, end: mapCommon.LatLng) {
    let params: navi.RouteParams = {
	// 起始点坐标
      origins: [
        start
      ],
	// 终点坐标
      destination: end,
      language: "zh_CN"
    };
    const result: navi.RouteResult = await (navi.getWalkingRoutes(params));
    return result

  }

将折线绘制在地图上

这一步就是简单的将我们的是上面的代码运用起来，最后将得到的折线绘制在地图上方

  aboutToAppear() {
    // 地图初始化参数
    this.mapOptions = {
      position: {
        target: {
          latitude: 31.98,
          longitude: 118.78
        },
        zoom: 14
      }
    };
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        // 获取起始目标点和终点目标点
        let start = (await this.search(this.start))
        let end = (await this.search(this.end))
        // 获取导航路线
        let nav: navi.RouteResult = (await this.navigation_directions(start, end))
        let route = nav.routes[0].overviewPolyline as mapCommon.LatLng[]
        // polyline初始化参数
        let polylineOption: mapCommon.MapPolylineOptions = {
          points: route,
          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.mapPolyline = await this.mapController.addPolyline(polylineOption);
      }
    };
  }

完整代码

最后附上完整的案例代码
初始页，用来输入我们的初始地和到达的地方

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@ohos.base';
import { router } from '@kit.ArkUI';


@Entry
@Component
struct HuaweiMapDemo {
  @State start: string = ""
  @State end: string = ""

  build() {

    Column() {

      Column() {
        Column() {
          Text("起始点")
          TextInput()
            .onChange((value: string) => {
              this.start = value
            })
        }

        Column() {
          Text("到达点")
          TextInput()
            .onChange((value: string) => {
              this.end = value
            })
        }
      }


      .width("100%")

      Button("导航")
        .onClick(() => {
          router.pushUrl({
            url: "pages/Nav",
            params: {
              start: this.start,
              end: this.end
            }
          })
        })

    }
    .size({ width: "100%", height: "100%" })
    .justifyContent(FlexAlign.SpaceEvenly)

  }
}

导航页，负责显示我们的路线

import { MapComponent, mapCommon, map, site, navi } from '@kit.MapKit';
import { AsyncCallback } from '@ohos.base';
import { router } from '@kit.ArkUI';

@Entry
@Component
struct HuaweiMapDemo {
  // 导航起始结束点
  @State start: string = (router.getParams() as object)?.["start"]
  @State end: string = (router.getParams() as object)?.["end"]
  @State start_latLng: mapCommon.LatLng = { longitude:0,latitude:0 }

  @State nav: mapCommon.LatLng[] = []
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapPolyline?: map.MapPolyline;

  // 位置搜索
  async search(place: string): Promise<mapCommon.LatLng> {
    let params: site.SearchByTextParams = {
      query: place,
      radius: 10000,
      language: "en"
    };
    const result: site.SearchByTextResult = await (site.searchByText(params));
    return result.sites![0].location as mapCommon.LatLng
  }

  // 获取导航路线
  async navigation_directions(start: mapCommon.LatLng, end: mapCommon.LatLng) {
    let params: navi.RouteParams = {
      origins: [
        start
      ],
      destination: end,
      language: "zh_CN"
    };
    const result: navi.RouteResult = await (navi.getWalkingRoutes(params));
    return result

  }

  async onPageShow() {
    // 出发点和终点坐标
    this.start_latLng = (await this.search(this.start))
  }

  aboutToAppear() {
    // 地图初始化参数
    this.mapOptions = {
      position: {
        target: {
          latitude: 31.98,
          longitude: 118.78
        },
        zoom: 14
      }
    };
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        // 获取起始目标点和终点目标点
        let start = (await this.search(this.start))
        let end = (await this.search(this.end))
        // 获取导航路线
        let nav: navi.RouteResult = (await this.navigation_directions(start, end))
        let route = nav.routes[0].overviewPolyline as mapCommon.LatLng[]
        // polyline初始化参数
        let polylineOption: mapCommon.MapPolylineOptions = {
          points: route,
          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.mapPolyline = await this.mapController.addPolyline(polylineOption);
      }
    };
  }

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

  }
}