美文网首页
react-naitve(调取外部地图:react-native

react-naitve(调取外部地图:react-native

作者: 妄自 | 来源:发表于2019-06-13 15:07 被阅读0次

    Linking.openURL("geo:")在安卓上面可以正常调起外部地图app,而ios不行,react-native-map-linking完美解决此问题

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

    快速开始

    使用npm安装
    npm install react-native-map-linking --save
    
    
    在需要到页面引入:

    import MapLinking from 'react-native-map-linking'

    调起外部地图, 并在地图上标记一个点
    MapLinking.markLocation({lat: 40, lng: 118}, 'title', 'cont')

    唤起地图, 并让地图规划从开始到结束的路线
    MapLinking.planRoute({lat:40, lng: 118, title: '起点'}, {lat:40, lng: 119, title: '终点'}, 'drive');

    唤起地图, 并发起导航
    MapLinking.navigate({lat:40, lng: 118, title: '终点'});

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

    iOS系统下需要在App的info.plist中配置Schema支持才能唤起地图:
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>baidumap</string>
        <string>iosamap</string>
    </array>
    

    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内建地图时, 地图标记和导航功能可能不精确, 推荐使用高德地图。

    相关文章

      网友评论

          本文标题:react-naitve(调取外部地图:react-native

          本文链接:https://www.haomeiwen.com/subject/osrsfctx.html