@dachongziy/react-native-map-linking

    1.0.8 • Public • Published

    English | 简体中文

    react-native-map-linking

    Go to third-party Map App for navigation, Android mobile stand by Gaode Map and BaiDu Map and Tencent Map, IOS mobile stand by Gaode Map and BaiDu Map and Tencent Map and Apple Map.

    npm version

    Example:Call the API to pass the starting location info and end location info to jump to the specified map app for navigation.

    • Prompt recommended download list when no third-party map app is installed (IOS comes with Apple map)

    • Select one of them to jump to the download address page (👇the following are the pages of Gao De Map, Baidu Map, Tencent Map)

    • When the system has a third-party map application installed, only the list of existing app is displayed.

    • Click on the list item and jump to the corresponding map application to navigate (the following are the navigation pages of Gao De Map, Baidu Map, Tencent Map)

    Install

    yarn

    yarn add @iwubida/react-native-map-linking

    npm install

    npm install @iwubida/react-native-map-linking

    Usage

    import MapLinking from '@iwubida/react-native-map-linking';
    import React, { PureComponent } from 'react';
    import { TouchableOpacity, Text } from 'react-native';
    
    class Demo extends PureComponent {
      handleChange = () => {
        // starting location info
        const startLocation = {
          lng: 106.534892,
          lat: 29.551891,
          title: '李子坝抗战遗址公园'
        };
    
        // end location info
        const destLocation = {
          lng: 106.27613,
          lat: 29.972084,
          title: '合川区邮政局(重庆市南园路198号)'
        };
    
        MapLinking.planRoute({ startLocation, destLocation });
      };
    
      render() {
        return (
          <TouchableOpacity onPress={this.handleChange}>
            <Text>start navigation</Text>
          </TouchableOpacity>
        );
      }
    }
    
    export default Demo;

    If you need to be compatible with Tencent map, you need to initialize the incoming Tencent map developer key. Application URL

    import MapLinking from '@iwubida/react-native-map-linking';
    
    componentDidMount() {
      MapLinking.init({ tmapKey: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77' });
    }

    Parameter support description

    planRoute API is supports following properties

    import MapLinking from '@iwubida/react-native-map-linking';
    
    MapLinking.planRoute({ startLocation, destLocation, mode, type });
    Name Type Default Description
    startLocation object null Starting location info
    destLocation object null End location info
    mode string 'ride' Navigation mode ['drive','bus','ride', 'walk']
    type string 'gcj02' coordinate type ['gcj02', 'wgs84']

    startLocation and destLocation is supports following properties

    Name Type Description
    lng number longitude
    lat object latitude
    title string address

    Install

    npm i @dachongziy/react-native-map-linking

    DownloadsWeekly Downloads

    7

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • dachongziy