模板版本：v0.4.0

`react-native-maps-directions`

该第三方库新的包名为：@react-native-ohos/react-native-maps-directions 版本所属关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-maps-directions	~1.10.0	@react-native-ohos/react-native-maps-directions Releases	0.82.*	否	API12+	v1.9.1	Npm Address
@react-native-ohos/react-native-maps-directions	~1.9.1	@react-native-ohos/react-native-maps-directions Releases	0.77.*	否	API12+	v1.9.1	Npm Address
@react-native-oh-tpl/react-native-maps-directions	~1.9.0-0.0.2	@react-native-oh-tpl/react-native-maps-directions Releases	0.72.*	否	API12+	v1.9.0	Npm Address

1. 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-ohos/react-native-maps-directions Releases。

对于未发布到npm的旧版本，请参考安装指南安装tgz包。

进入到工程目录并输入以下命令：

npm

# V0.72
npm install @react-native-oh-tpl/react-native-maps-directions

# V0.77/0.82
npm install @react-native-ohos/react-native-maps-directions

yarn

# V0.72
yarn add @react-native-oh-tpl/react-native-maps-directions

# V0.77/0.82
yarn add @react-native-ohos/react-native-maps-directions

该库依赖三方库 react-native-maps，请按照react-native-maps文档引入此依赖库

下面的代码展示了这个库的基本使用场景：

使用时 import 的库名不变。

import React, { Component } from 'react';
import { Dimensions, StyleSheet, View, Text } from 'react-native';
import MapViewDirections from 'react-native-maps-directions';
import MapView, { Marker } from "react-native-maps";

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 37.771707;
const LONGITUDE = -122.4053769;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const MAPS_APIKEY = 'xxxxxx';

class MapExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      coordinates: [
        {
          latitude: 37.3317876,
          longitude: -122.0054812,
        },
        {
          latitude: 37.771707,
          longitude: -122.4053769,
        },
      ],
    };
    this.mapView = null;
  }

  onMapPress = (e) => {
    this.setState({
      coordinates: [
        ...this.state.coordinates,
        e.nativeEvent.coordinate,
      ],
    });
  }

  render() {
    const { coordinates} = this.state;
    return (
      <View style={styles.container}>
      <MapView
        initialRegion={{
          latitude: LATITUDE,
          longitude: LONGITUDE,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA,
        }}
        style={StyleSheet.absoluteFill}
        ref={c => this.mapView = c}
        onPress={this.onMapPress}>
      
        {this.state.coordinates.map((coordinate, index) =>
          <Marker key={`coordinate_${index}`} coordinate={coordinate} />
        )}
        {(this.state.coordinates.length >= 2) && (
          <MapViewDirections
            origin={this.state.coordinates[0]}
            destination={this.state.coordinates[this.state.coordinates.length-1]}
            apikey={MAPS_APIKEY}
            mode='BICYCLING'
            strokeWidth={6}
            strokeColor={"#0000FF"}
            resetOnChange={true}
            onStart={(params) => {
              console.log(`Started routing between "${params.origin}" and "${params.destination}"`);
            }}
            onReady={result => {
              console.log(`Distance: ${result.distance} km`)
              console.log(`Duration: ${result.duration} min.`)
              this.mapView.fitToCoordinates(result.coordinates, {
                edgePadding: {
                  right: (width / 20),
                  bottom: (height / 20),
                  left: (width / 20),
                  top: (height / 20),
                }
              });
            }}
            onError={(errorMessage) => {
              console.log('GOT AN ERROR');
            }}
          />
         )} 
      </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "flex-end",
    alignItems: "center",
    height: 300,
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default MapExample;

2. Link

本库在HarmonyOS NEXT侧实现依赖 react-native-maps 的原生端代码，如已在HarmonyOS NEXT工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照react-native-maps 文档的 Link 章节进行引入

3. 约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和手机 ROM。

在以下版本验证通过：

RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
RNOH: 0.82.21; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1.260; ROM: 6.0.1.116;

4. 属性

"Platform"列表示该属性在原三方库上支持的平台。

"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

由于渲染在屏幕上的结果是 MapView.Polyline 组件，因此也支持 MapView.Polyline 属性，MapView.Polyline属性参见react-native-maps。

名称	描述	类型	是否必填	默认值	平台	鸿蒙是否支持
`origin`	设置路线的起点	LatLng`or`String	是		iOS/Android	是
destination	设置路线的终点	LatLng`or`String	是		iOS/Android	是
apikey	用于验证身份并授权应用调用 Google Maps Directions API 服务点击查看相关文档	String	是		iOS/Android	是
waypoints	路线中的途经点	[`LatLng` or `String`]	否	[]	iOS/Android	否
language	路线规划结果中导航指示的语言点击查看相关文档 for more info.	String	否	en	iOS/Android	否
mode	指定出行方式，有 `"DRIVING"`, `"BICYCLING"`, `"WALKING"`, 和 `"TRANSIT"` 四种模式	String	false	"DRIVING"	iOS/Android	部分支持 (仅支持 `"DRIVING"`, `"BICYCLING"`, `"WALKING"`)
resetOnChange	用于控制当组件的属性（如起点、终点）发生变化时，是否立即清除地图上已绘制的旧路线。true 为立即清除，false 为不清除，默认为 true	boolean	否	true	iOS/Android	是
optimizeWaypoints	用于自动优化途经点的访问顺序点击查看相关文档	boolean	否	false	iOS/Android	否
splitWaypoints	用于途经的地点非常多（超过 10 个）时，自动把路线分成好几段来计算，以避免报错点击查看相关文档	boolean	否	false	iOS/Android	否
directionsServiceBaseUrl	自定义路线规划 API 的请求地址	string	否	(Google's)	iOS/Android	是
region	指定路线规划服务的地理区域偏好点击查看相关文档	String	否		iOS/Android	否
precision	控制路线的绘制精度与性能之间的平衡	String	否	"low"	iOS/Android	否
timePrecision	指定计算路线时所使用的出发时间或到达时间	String	否	"none"	iOS/Android	否
channel	标识发出 API 请求的特定渠道或应用程序	String	否		iOS/Android	否
strokeColor	设置地图上绘制的路线的颜色	String	否		iOS/Android	是
strokeWidth	设置地图上绘制的路线的粗细	number	否		iOS/Android	是

事件和返回

事件名称	描述	类型	是否必填	平台	鸿蒙是否支持
`onStart`	回调函数，在路线请求刚刚开始时触发	Function	否	iOS/Android	是
`onReady`	回调函数，当路线数据成功从 API 获取、计算完成并准备在地图上绘制时触发	Function	否	iOS/Android	是
`onError`	回调函数，当路线请求失败或发生异常时触发	Function	否	iOS/Android	是

onStart

 onStart(params:Object):void

名称	描述	类型	是否必填	平台	鸿蒙是否支持
params	回调函数返回值，包含起点、终点和中间点的经纬度信息。数据格式为：{ origin, destination, waypoints: [] }	Object	是	iOS/Android	是

onReady

 onReady(result:Object):void

名称	描述	类型	是否必填	平台	鸿蒙是否支持
result	回调函数返回值，包含起点到终点的距离、路程时间、和途径路径的经纬度等信息。数据格式：{ distance: Number, duration: Number, coordinates: [], fare: Object, waypointOrder: [[]] }	Object	是	iOS/Android	是

onError

 onError(errorMessage:Object):void

名称	描述	类型	是否必填	平台	鸿蒙是否支持
errorMessage	回调函数返回值，访问directions rest api的报错信息	Object	是	iOS/Android	是

5. 遗留问题

waypoints属性不支持，不支持的原因是由于华为侧Directions API不支持中间点参数查询：issue#13
language属性不支持，不支持的原因是由于华为侧Directions API只支持文字指引的语种和谷歌地图api的语言本地化本地化功能不一样：issue#14
optimizeWaypoints属性不支持，不支持的原因是由于华为侧Directions API不支持中间点优化，获取更快路线：issue#15
splitWaypoints属性不支持，不支持的原因是由于华为侧Directions API不支持将中间点个数设置，将其分割成多条路线：issue#16
region属性不支持，不支持的原因是由于华为侧Directions API不支持地区代码和地点的映射：issue#17
precision属性不支持，不支持的原因是由于华为侧Directions API不支持更精细的绘画路程线路：issue#18
timePrecision属性不支持，不支持的原因是由于华为侧Directions API不支持实时查询路线：issue#19
channel属性不支持，不支持的原因是由于华为侧Directions API不支持渠道查询：issue#20

6. 其他

华为地图apikey申请参见获取API key，其中说明的内容请重点关注。

7. 开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。