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.

68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40697775626964612f72656163742d6e61746976652d6d61702d6c696e6b696e672e7376673f7374796c653d666c6174

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)

36796b0c2af82fdd9df16bfec7238923.png

Select one of them to jump to the download address page (

👇the following are the pages of Gao De Map, Baidu Map, Tencent Map)

0930e39764be2c9acfb179ad2f3dd6c3.pngandroid-install-baidu.jpg9c80ece0747d07561d03d11ae50af2e7.png

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

1f9101452d8c8fc04b4fdb0a146ca252.pngcca7ad131ee851fae4487b39d42b259a.png

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)

1c4f9cf72496beda549f2386bf271a81.pngandroid-baidu.jpgandroid-qq.jpg

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 (

start navigation

);

}

}

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

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐