调起地图App实现路径规划导航等

新造了一个轮子，用来调起地图App实现路径规划导航等。

NPM：https://www.npmjs.com/package/react-native-map-linking GitHub: https://github.com/starlight36/react-native-map-linking

这是一个利用React Native的Linking组件唤起系统内建地图的轮子, 目前支持:

Android平台 高德地图百度地图 iOS平台 高德地图百度地图苹果地图

快速开始

使用npm安装

npm install react-native-map-linking --save

引用组件, 开始使用:

import MapLinking from 'react-native-map-linking'; // 唤起地图, 并在地图上标记一个点 MapLinking.markLocation({lat: 40, lng: 118}, 'aaa', 'bbb'); // 唤起地图, 并让地图规划从开始到结束的路线 MapLinking.planRoute({lat:40, lng: 118, title: '起点'}, {lat:40, lng: 119, title: '终点'}, 'drive'); // 唤起地图, 并发起导航 MapLinking.navigate({lat:40, lng: 118, title: '终点'});

注意: iOS系统需要配置Schema支持, 见下面的说明。

API

markLocation(location, title, content)

在地图上标记一个点的位置。

location 位置坐标, 是一个对象, 包括: lat - 经度lng - 纬度type - 坐标类型, 支持gcj02(国测局坐标), wgs84(GPS坐标) title 地点标记名称content 地点标记说明

planRoute(srcLocation, distLocation, mode)

规划两点之间的线路。

srcLocation 起始位置坐标, 是一个对象, 包括: lat - 经度lng - 纬度title - 起始位置名称 distLocation 结束位置坐标, 是一个对象, 包括: lat - 经度lng - 纬度type - 坐标类型, 支持gcj02(国测局坐标), wgs84(GPS坐标)title - 结束位置名称 mode 路线模式 drive - 驾车bus - 公交walk - 步行

navigate(distLocation)

启动当前位置到目标位置的导航。

distLocation 结束位置坐标, 是一个对象, 包括: lat - 经度lng - 纬度type - 坐标类型, 支持gcj02(国测局坐标), wgs84(GPS坐标)title - 结束位置名称

一些问题

如果系统内没有可用的地图, 组件会推荐下载高德地图、百度地图。使用iOS内建地图时, 地图标记和导航功能可能不精确, 推荐使用高德地图。

iOS配置Schema支持

iOS系统下需要在App的info.plist中配置Schema支持才能唤起地图:

<key>LSApplicationQueriesSchemes</key> <array> <string>baidumap</string> <string>iosamap</string> </array>