Một Thành phần Liên kết Bản đồ Hiện đại và Tùy chỉnh cho React Native

Một cách dễ dàng để mở vị trí trong ứng dụng bản đồ mà người dùng đã cài đặt trên thiết bị của họ, dựa trên các ứng dụng họ đã cài đặt trên thiết bị của họ. Ứng dụng hỗ trợ Apple Maps, Google Maps, Citymapper, Uber và hàng chục ứng dụng khác.

Danh sách đầy đủ các ứng dụng được hỗ trợ

• Apple Maps – apple-maps
• Google Maps – google-maps
• Citymapper – citymapper
• Uber – uber
• Lyft – lyft
• The Transit App – transit
• TruckMap – truckmap
• Waze – waze
• Yandex.Navi – yandex
• Moovit – moovit
• Yandex Taxi – yandex-taxi
• Yandex Maps – yandex-maps
• Kakao Map – kakaomap
• Mapy.cz – mapycz
• Maps.me – maps-me
• OsmAnd – osmand
• Gett – gett
• Naver Map – navermap
• 2GIS – dgis
• Liftago – liftago
• Petal Maps – petalmaps (chỉ dành cho Android)

Cài đặt

1. Cài đặt gói

npm i -S react-native-map-link         # or yarn add react-native-map-link

2. Bước sau khi cài đặt

Dựa trên các nền tảng mà ứng dụng của bạn hỗ trợ, bạn cũng cần:

iOS – Cập nhật Info.plist

Để cho phép ứng dụng của bạn xác định xem liệu có cài đặt bất kỳ ứng dụng hướng dẫn nào không, trên iOS cần có một bước bổ sung. Ứng dụng của bạn cần cung cấp khóa LSApplicationQueriesSchemes trong ios/{my-project}/Info.plist để chỉ định các URL schemes mà ứng dụng có thể tương tác.

Chỉ cần thêm điều này vào Info.plist của bạn tùy thuộc vào các ứng dụng mà bạn muốn hỗ trợ. Bỏ qua chúng có thể dẫn đến việc thư viện không thể phát hiện được một số ứng dụng bản đồ được cài đặt bởi người dùng.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>comgooglemaps</string>
    <string>citymapper</string>
    <string>uber</string>
    <string>lyft</string>
    <string>transit</string>
    <string>truckmap</string>
    <string>waze</string>
    <string>yandexnavi</string>
    <string>moovit</string>
    <string>yandextaxi</string>
    <string>yandexmaps</string>
    <string>kakaomap</string>
    <string>szn-mapy</string>
    <string>mapsme</string>
    <string>osmandmaps</string>
    <string>gett</string>
    <string>nmap</string>
    <string>dgis</string>
    <string>lftgpas</string>
</array>

Sử dụng Expo? Đọc hướng dẫn để làm cho nó hoạt động trên iOS.

Android – Cập nhật AndroidManifest.xml

Khi chuyển sang Android 11/Android SDK 30 (tức là sử dụng Expo SDK 41), thư viện này không hoạt động ngay lập tức nữa. Nguyên nhân là tính năng bảo mật mới Package Visibilty. Chúng ta sẽ cần cập nhật AndroidManifest.xml của chúng ta để cho phép truy vấn cho các ứng dụng khác một cách rõ ràng.

Bạn có thể làm điều này bằng cách sao chép câu lệnh <queries> bên dưới và dán nó vào cấp độ trên cùng của tệp AndroidManifest của bạn (tức là trong <manifest> ... </manifest>).

<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="http"/>
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https"/>
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="geo" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="google.navigation" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="applemaps" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="citymapper" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="uber" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="lyft" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="transit" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="truckmap" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="waze" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="yandexnavi" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="moovit" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="yandexmaps://maps.yandex." />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="yandextaxi" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="kakaomap" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="mapycz" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="mapsme" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="osmand.geo" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="gett" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="nmap" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="dgis" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="lftgpas" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="petalmaps" />
  </intent>
</queries>

Nếu bạn gặp lỗi ‘unexpected element <queries> found in <manifest>‘, hãy đảm bảo bạn có phiên bản Gradle cập nhật trong tệp android/build.gradle của bạn:

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

Thêm thông tin here.

Expo – Cập nhật app.json

Đọc hướng dẫn ở đây

Sử dụng

Sử dụng hàm showLocation sẽ hiển thị một hộp thực hiện trên iOS và một thông báo trên Android, mà không cần bất kỳ kiểu dáng tùy chỉnh nào:

import {showLocation} from 'react-native-map-link';

showLocation({
  latitude: 38.8976763,
  longitude: -77.0387185,
  sourceLatitude: -8.0870631, // optionally specify starting location for directions
  sourceLongitude: -34.8941619, // not optional if sourceLatitude is specified
  title: 'The White House', // optional
  googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
  googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58', // optionally specify the google-place-id
  alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
  dialogTitle: 'This is the dialog Title', // optional (default: 'Open in Maps')
  dialogMessage: 'This is the amazing dialog Message', // optional (default: 'What app would you like to use?')
  cancelText: 'This is the cancel button text', // optional (default: 'Cancel')
  appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
  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.
  // appTitles: { 'google-maps': 'My custom Google Maps title' }, // optionally you can override default app titles
  // app: 'uber',  // optionally specify specific app to use
  directionsMode: 'walk', // optional, accepted values are 'car', 'walk', 'public-transport' or 'bike'
});

Ghi chú:

• Các tùy chọn sourceLatitude/sourceLongitude chỉ hoạt động nếu bạn chỉ định cả hai. Hiện tại hỗ trợ tất cả các ứng dụng ngoại trừ Waze.
• directionsMode hoạt động trên google-maps và apple-maps (trên apple-maps, chế độ bike sẽ không hoạt động). Nếu không đặt nó, ứng dụng sẽ quyết định dựa trên cài đặt riêng của nó.
• Nếu bạn đặt directionsMode nhưng không đặt sourceLatitude và sourceLongitude, google-maps và apple-maps vẫn sẽ chuyển sang chế độ chỉ đường và sử dụng vị trí hiện tại làm điểm xuất phát.

Hoặc

Sử dụng hàm getApps sẽ trả về một mảng (GetAppResult[]) với các ứng dụng có sẵn trên điện thoại thông minh:

type GetAppResult = {
  id: string;
  name: string;
  icon: NodeRequire;
  open: () => Promise<void>;
};


import {getApps, GetAppResult} from 'react-native-map-link';

const Demo = () => {
  const [availableApps, setAvailableApps] = useState<GetAppResult[]>([]);

  useEffect(() => {
    (async () => {
      const result = await getApps({
        latitude: 38.8976763,
        longitude: -77.0387185,
        title: 'The White House', // optional
        googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
        alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
        appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
      });
      setAvailableApps(result);
    })();
  }, []);

  return (
    <React.Fragment>
      {availableApps.map(({icon, name, id, open}) => (
        <Pressable key={id} onPress={open}>
          <Image source={icon} />
          <Text>{name}</Text>
        </Pressable>
      ))}
    </React.Fragment>
  );
};

Thêm thông tin

• Sử dụng thư viện này với Expo
• Sử dụng thay thế: hộp thoại được thiết kế
• Thêm hỗ trợ cho các ứng dụng bản đồ mới

Get professional support for this package → ****
Có sẵn các phiên tư vấn tùy chỉnh để hỗ trợ triển khai hoặc phát triển tính năng.

Chi tiết tải xuống:

Tác giả: includable
Nguồn: https://github.com/includable/react-native-map-link

Giấy phép: MIT license