调起地图App实现路径规划导航等
2017-03-08 23:05
831 查看
新造了一个轮子,用来调起地图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安装
引用组件, 开始使用:
注意: iOS系统需要配置Schema支持, 见下面的说明。
在地图上标记一个点的位置。
location 位置坐标, 是一个对象, 包括:
lat - 经度
lng - 纬度
type - 坐标类型, 支持
title 地点标记名称
content 地点标记说明
规划两点之间的线路。
srcLocation 起始位置坐标, 是一个对象, 包括:
lat - 经度
lng - 纬度
title - 起始位置名称
distLocation 结束位置坐标, 是一个对象, 包括:
lat - 经度
lng - 纬度
type - 坐标类型, 支持
title - 结束位置名称
mode 路线模式
drive - 驾车
bus - 公交
walk - 步行
启动当前位置到目标位置的导航。
distLocation 结束位置坐标, 是一个对象, 包括:
lat - 经度
lng - 纬度
type - 坐标类型, 支持
title - 结束位置名称
如果系统内没有可用的地图, 组件会推荐下载高德地图、百度地图。
使用iOS内建地图时, 地图标记和导航功能可能不精确, 推荐使用高德地图。
iOS系统下需要在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>
相关文章推荐
- IOS实现应用内打开第三方地图app进行导航
- Android百度地图实例详解之仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录,导航等)
- 高德地图导航和标注,通过调用高德APP实现呢
- 路径规划A*算法及SLAM自主地图创建导航算法
- 高德地图简单实现及路径规划
- Android百度地图实例详解之仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录,导航等)
- IOS实现应用内打开第三方地图app进行导航
- android调用外部地图APP导航路线规划全解
- android app调用第三方地图路线规划导航(百度,高德,腾讯)
- 仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录,导航等)
- App外部跳转百度地图,高德地图,进行导航,路径规划等
- iOS开发 - iOS实现应用内打开第三方地图app进行导航
- Android百度地图实例详解之仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录,轨迹回放,导航等)
- iOS调用各大地图APP导航,进行路线规划
- Android百度地图实例详解之仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录,导航等)
- android和ios GoogleMap画导航线路图 路径规划(Directions)
- python for android : 地图路径规划
- 关于微信LBS 升级版后SOSO 地图用JAVA 实现导航功能
- Android集成百度地图接口,实现定位+路径规划。新手教程