react-native-map-link-x

An easy way to open a location in a map app of the user's choice, based on the apps they have installed on their device. The app supports Apple Maps, Google Maps, Citymapper, Uber and a dozen other apps.

This is fork from react-native-map-link. Based on the original library, it adds support for Gaode Maps, Baidu Maps, and Tencent Maps. Additionally, it resolves the issue where some devices, are unable to recognize map apps, such as Huawei.

根据用户设备中已安装的地图应用，提供一种便捷方式，打开用户所选的定位导航。支持苹果地图、谷歌地图、优步，以及其他国外主流地图应用。

本库 Fork 自 react-native-map-link，在原库的基础上，添加对高德地图、百度地图、腾讯地图的支持。另外，解决部分 Android 设备无法识别地图应用的问题，如华为手机等。

Installation

1. Install the package

1npm i -S react-native-map-link-x
2# or
3yarn add react-native-map-link-x

2. Post-install steps

Based on the platforms your app supports, you also need to:

注意：

• 切记更新 iOS 和 Android 配置，否则将无法调起地图应用；
• 仅在中国使用的话，可以剔除大部分国外地图应用，保留 iosamap、androidmap、baidumap、qqmap；
• 繁体中文地区，支持显示繁体，但未经过实地测试，欢迎参与测试。

1<key>LSApplicationQueriesSchemes</key>
2<array>
3    <string>iosamap</string>
4    <string>androidamap</string>
5    <string>baidumap</string>
6    <string>qqmap</string>
7    <string>comgooglemaps</string>
8    <string>citymapper</string>
9    <string>uber</string>
10    <string>lyft</string>
11    <string>transit</string>
12    <string>truckmap</string>
13    <string>waze</string>
14    <string>yandexnavi</string>
15    <string>moovit</string>
16    <string>yandextaxi</string>
17    <string>yandexmaps</string>
18    <string>kakaomap</string>
19    <string>tmap</string>
20    <string>szn-mapy</string>
21    <string>mapsme</string>
22    <string>osmandmaps</string>
23    <string>gett</string>
24    <string>nmap</string>
25    <string>dgis</string>
26    <string>lftgpas</string>
27    <string>sygic</string>
28</array>

1<queries>
2  <intent>
3    <action android:name="android.intent.action.VIEW" />
4    <data android:scheme="http"/>
5  </intent>
6  <intent>
7    <action android:name="android.intent.action.VIEW" />
8    <data android:scheme="https"/>
9  </intent>
10  <intent>
11    <action android:name="android.intent.action.VIEW" />
12    <data android:scheme="geo" />
13  </intent>
14  <intent>
15    <action android:name="android.intent.action.VIEW" />
16    <data android:scheme="androidamap"/>
17  </intent>
18  <intent>
19    <action android:name="android.intent.action.VIEW" />
20    <data android:scheme="baidumap"/>
21    <data android:host="map"/>
22  </intent>
23  <intent>
24    <action android:name="android.intent.action.VIEW" />
25    <data android:scheme="qqmap"/>
26  </intent>
27  <intent>
28    <action android:name="android.intent.action.VIEW" />
29    <data android:scheme="google.navigation" />
30  </intent>
31  <intent>
32    <action android:name="android.intent.action.VIEW" />
33    <data android:scheme="applemaps" />
34  </intent>
35  <intent>
36    <action android:name="android.intent.action.VIEW" />
37    <data android:scheme="citymapper" />
38  </intent>
39  <intent>
40    <action android:name="android.intent.action.VIEW" />
41    <data android:scheme="uber" />
42  </intent>
43  <intent>
44    <action android:name="android.intent.action.VIEW" />
45    <data android:scheme="lyft" />
46  </intent>
47  <intent>
48    <action android:name="android.intent.action.VIEW" />
49    <data android:scheme="transit" />
50  </intent>
51  <intent>
52    <action android:name="android.intent.action.VIEW" />
53    <data android:scheme="truckmap" />
54  </intent>
55  <intent>
56    <action android:name="android.intent.action.VIEW" />
57    <data android:scheme="waze" />
58  </intent>
59  <intent>
60    <action android:name="android.intent.action.VIEW" />
61    <data android:scheme="yandexnavi" />
62  </intent>
63  <intent>
64    <action android:name="android.intent.action.VIEW" />
65    <data android:scheme="moovit" />
66  </intent>
67  <intent>
68    <action android:name="android.intent.action.VIEW" />
69    <data android:scheme="yandexmaps://maps.yandex." />
70  </intent>
71  <intent>
72    <action android:name="android.intent.action.VIEW" />
73    <data android:scheme="yandextaxi" />
74  </intent>
75  <intent>
76    <action android:name="android.intent.action.VIEW" />
77    <data android:scheme="kakaomap" />
78  </intent>
79    <intent>
80    <action android:name="android.intent.action.VIEW" />
81    <data android:scheme="tmap" />
82  </intent>
83  <intent>
84    <action android:name="android.intent.action.VIEW" />
85    <data android:scheme="mapycz" />
86  </intent>
87  <intent>
88    <action android:name="android.intent.action.VIEW" />
89    <data android:scheme="mapsme" />
90  </intent>
91  <intent>
92    <action android:name="android.intent.action.VIEW" />
93    <data android:scheme="osmand.geo" />
94  </intent>
95  <intent>
96    <action android:name="android.intent.action.VIEW" />
97    <data android:scheme="gett" />
98  </intent>
99  <intent>
100    <action android:name="android.intent.action.VIEW" />
101    <data android:scheme="nmap" />
102  </intent>
103  <intent>
104    <action android:name="android.intent.action.VIEW" />
105    <data android:scheme="dgis" />
106  </intent>
107  <intent>
108    <action android:name="android.intent.action.VIEW" />
109    <data android:scheme="lftgpas" />
110  </intent>
111  <intent>
112    <action android:name="android.intent.action.VIEW" />
113    <data android:scheme="petalmaps" />
114  </intent>
115  <intent>
116    <action android:name="android.intent.action.VIEW" />
117    <data android:scheme="com.sygic.aura" />
118  </intent>
119</queries>

1classpath("com.android.tools.build:gradle:3.5.4")

Simple example

1import { showLocation } from 'react-native-map-link-x';
2
3showLocation({
4  latitude: 38.8976763,
5  longitude: -77.0387185,
6  title: 'Your destination',
7});

Chinese example

使用默认组件显示地图应用列表：

1import { showLocation } from 'react-native-map-link-x';
2
3// 弹出默认地图应用列表
4showLocation({
5  latitude: 24.436048,
6  longitude: 118.088061,
7  title: '世贸海峡大厦',
8  address: '厦门市思明区演武西路180-188号',
9  dialogTitle: '在地图中打开',
10  dialogMessage: '请选择您想要打开的地图',
11  cancelText: '取消',
12  appsWhiteList: ['apple-maps', 'amap', 'baidumap', 'qqmap'],
13});

使用第三方 ActionSheet 组件显示地图应用列表：

1import { getApps } from 'react-native-map-link-x';
2// 引入第三方 ActionSheet 组件
3import { useActionSheet } from '@expo/react-native-action-sheet';
4
5...
6
7const { showActionSheetWithOptions } = useActionSheet();
8
9// 获取可用的地图应用列表
10const apps = await getApps({
11  latitude: 24.436048,
12  longitude: 118.088061,
13  title: '世贸海峡大厦',
14  address: '厦门市思明区演武西路180-188号',
15});
16
17// 通过第三方 ActionSheet 组件显示地图应用列表
18showActionSheetWithOptions({
19  options: apps.map((app) => app.name).push('取消'),
20}, {
21  onPress: (index) => {
22    const app = apps[index];
23    app?.open();
24  }
25});

Full usage

Using the showLocation function will shown an action sheet on iOS and an alert on Android, without any custom styling:

1import { showLocation } from 'react-native-map-link-x';
2
3showLocation({
4  latitude: 38.8976763,
5  longitude: -77.0387185,
6  sourceLatitude: -8.0870631, // optionally specify starting location for directions
7  sourceLongitude: -34.8941619, // required if sourceLatitude is specified
8  title: 'The White House', // optional 
9  googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
10  googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58', // optionally specify the google-place-id
11  alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
12  dialogTitle: 'This is the dialog Title', // optional (default: 'Open in Maps')
13  dialogMessage: 'This is the amazing dialog Message', // optional (default: 'What app would you like to use?')
14  cancelText: 'This is the cancel button text', // optional (default: 'Cancel')
15  appsWhiteList: ['amap', 'baidumap', 'qqmap'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
16  naverCallerName: 'com.example.myapp', // to link into Naver Map You should provide your appname which is the bundle ID in iOS and applicationId in android.
17  appTitles: {'google-maps': 'My custom Google Maps title'}, // optionally you can override default app titles
18  app: 'uber', // optionally specify specific app to use
19  directionsMode: 'walk', // optional, accepted values are 'car', 'walk', 'public-transport' or 'bike'
20});

Alternatively you can specify the address field and leave the latitude and longitude properties as empty strings

1import { showLocation } from 'react-native-map-link-x';
2
3showLocation({
4  address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // Required if replacing latitude and longitude
5  app: 'comgooglemaps',  // optionally specify specific app to use
6});

Notes:

• The sourceLatitude / sourceLongitude options only work if you specify both. Currently supports all apps except Waze.
• directionsMode works on google-maps, apple-maps and sygic (on apple-maps, bike mode will not work, while on sygic, only walk and car will work). Without setting it, the app will decide based on its own settings.
• If you set directionsMode but do not set sourceLatitude and sourceLongitude, google-maps and apple-maps will still enter directions mode, and use the current location as starting point.
• If you want to query an address instead of passing the latitude and longitude fields, you can do this by leaving those fields off and provide a full address to be queried with the address field. Just be aware that not all applications support this.

Or

Using the getApps function will return an array (GetAppResult[]) with the apps available on the smartphone:

1type GetAppResult = {
2  id: string;
3  name: string;
4  icon: NodeRequire;
5  open: () => Promise<void>;
6};

1import { getApps, GetAppResult } from 'react-native-map-link-x';
2
3const Demo = () => {
4  const [availableApps, setAvailableApps] = useState<GetAppResult[]>([]);
5
6  useEffect(() => {
7    (async () => {
8      const result = await getApps({
9        latitude: 38.8976763,
10        longitude: -77.0387185,
11        address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // optional 
12        title: 'The White House', // optional
13        googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
14        alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
15        appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
16      });
17      setAvailableApps(result);
18    })();
19  }, []);
20
21  return (
22    <React.Fragment>
23      {availableApps.map(({icon, name, id, open}) => (
24        <Pressable key={id} onPress={open}>
25          <Image source={icon} />
26          <Text>{name}</Text>
27        </Pressable>
28      ))}
29    </React.Fragment>
30  );
31};

More information

• Using this library with Expo
• Alternative usage: styled popup
• Adding support for new maps apps