Goong Documents
React Native

Sử dụng Goong Maps với Goong React Native

Phiên bản hiện tại: v1.0.9

  • Tuỳ chỉnh kiểu bản đồ
  • Tải map nhanh
  • Tương thích với các công cụ khác của Goong

Đóng góp trên GitHub

Goong React native sử dụng các thư viện mobile dựa trên Mapbox để cung cấp các yếu tố bản đồ cho các ứng dụng của bạn. Nó là một phần của hệ sinh thái Goong GL. Để bắt đầu với Goong React Native hoặc bất kỳ nền tảng nào khác của chúng tôi, hãy tự tạo cho bạn một API key.

Bắt đầu ngay

Đầu tiên bạn phải làm là cài đặt thư viện rnmapbox/maps bằng lệnh sau :

Sử dụng yarn

yarn add @rnmapbox/maps

Sử dụng npm

npm install --save @rnmapbox/maps

Cài đặt accessToken

import MapboxGL from "@rnmapbox/maps";
MapboxGL.setAccessToken("<YOUR_ACCESSTOKEN>");</YOUR_ACCESSTOKEN>

Cài đặt trạng thái kết nối(áp dụng cho Android)

import MapboxGL from "@rnmapbox/maps";
MapboxGL.setConnected(true);

Hiển thị bản đồ

Ví dụ:

import React, { useEffect, useRef } from "react";
import { StyleSheet, View } from "react-native";
import MapboxGL from "@rnmapbox/maps";
import MapAPi from '../core/api/MapAPI';

MapboxGL.setConnected(true); // áp dụng cho android
MapboxGL.setAccessToken("<YOUR_ACCESSTOKEN>");

const App = () => {
  const [loadMap] = useState();
  /*sử dụng Load Map*/ // kiểu URL cho bản đồ
  const [coordinates] = useState([105.83991, 21.028]); // Vị trí mà bản đồ nên căn giữa. [lng, lat]


  const camera = useRef(null);

  return (
    <View style={{ flex: 1 }}>
      <MapboxGL.MapView
        styleURL={loadMap}
        onPress={handleOnPress}
        style={{ flex: 1 }}
        projection="globe" //Phép chiếu được sử dụng khi hiển thị bản đồ
        zoomEnabled={true}
      >
        <MapboxGL.Camera
          ref={camera}
          zoomLevel={6} // Mức thu phóng của bản đồ
          centerCoordinate={coordinates}
        />
      </MapboxGL.MapView>
    </View>
  );
};

export default App;

Đánh dấu

  1. Khởi tạo bản đồ (Hiển thị bản đồ)
  2. Lấy dữ liệu từ goongApi
  3. Gán PointAnnotation vào bản đồ ví dụ :
import MapboxGL from "@rnmapbox/maps";

...
const App = () => {
const [locations, setLocations] = useState([]);
...
// sử dụng goong Api để lấy setlocation
const getPlacesAutocomplete = async () => {
        let autoComplete = await MapAPi.getPlacesAutocomplete({
            search: encodeURIComponent(search),
        });
    };

return (
     <MapboxGL.MapView
     ... >
     {locations.map((item, index) => (
        <MapboxGL.PointAnnotation
            id=`pointID-${index}`
            key=`pointKey-${index}`
            coordinate={item.coord} // điểm hiển thị
            draggable={true}>
        </MapboxGL.PointAnnotation>
    ))}
     </MapboxGL.MapView>
)}
export default App;

constant.js


  export const SERVER = {
  API_key: ['API_key'],
  API_Url: ['https://url']
};

MapAPI.js

import * as APICONST from './constant';
...
getPlacesAutocomplete = body => {
    return authorizedRequest.get(
      API_LIST.PlacesAutocomplete + PREFIX + '&input=' + body.search,); // đường dẫn url
  };

body.search: tham số truyền vào

lưu ý: Nếu bạn muốn hiển thị title cho điểm bạn vừa đánh dấu bằng cách click double vào điểm hãy sử dụng

<MapboxGL.Callout title={item.key} />

Bạn có thể thay đổi ảnh mặc đinh của PointAnnotation bằng hình ảnh của bạn vào trong :

MapboxGL.PointAnnotation

Dẫn đường

  1. Khởi tạo bản đồ (Hiển thị bản đồ)
  2. Lấy dữ liệu từ goongApi
  3. Gán dẫn đường vào bản đồ bằng cách sử dụng MapboxGL.ShapeSource và MapboxGL.LineLayer ví dụ :
import MapboxGL from "@rnmapbox/maps";
...
const App = () => {
    const [locations, setLocations] = useState([]);
    const [route, setRoute] = useState([]);
    ...
const getDirections = async () => {
    /* sử dụng goong Api để lấy dữ liẹu*/

    const direction = await MapAPi.getDirections({
        vehicle: vehicle,
        origin: locations[0].coord,
        destination: originText,
    });

    ...
    const colors = ['#00b0ff', '#bbbdbf'];
    const featureCollection = {
        features: [
            {
                type: "Feature",
                properties: {},
                geometry: {
                    type: "LineString",
                    coordinates: coordinates // mảng các điểm bao gôm lng và lat
                },
                pain: color,
            }
        ]
    };
    setRoute(featureCollections)

    const geoJsonData = {
        type: 'FeatureCollection',
        features: [],
    };
    route.forEach((item) => {
        geoJsonData.features.push(...item.features);
    });
}
return (
     <MapboxGL.MapView
     ... >
     ...
     {geoJsonData.features.map((item, index) => {
        const lineColor = `${item.pain}`
        const layerId = `linelayer-${index}`
        const lineID = `line-${index}`
        const markerID = `marker-${index}`
        return (
            <View>
                <MapboxGL.ShapeSource
                    id={lineID}
                    shape={item}
                    clusterRadius={8}
                    cluster={true}
                >
                    <MapboxGL.LineLayer
                        id={layerId}
                        key={layerId}
                        style={{
                            lineColor: lineColor,
                            lineWidth: 7
                        }}
                    />

                </MapboxGL.ShapeSource>
            </View>
        );
    })}
     </MapboxGL.MapView>
    /* thêm ô tìm kiếm và gọi hàm getDirections */
)}
export default App;

MapAPI.js


import * as APICONST from './constant';
...

  getDirections = body => {
    return authorizedRequest.get(
      URL + API_LIST.Directions + body.vehicle + '&api_key=' + PREFIX + '&origin=' +
       encodeURIComponent(body.origin[1] + ',' + body.origin[0]) + '&destination=' +
       encodeURIComponent(body.destination[1] + ',' + body.destination[0]) + '<ernatives=true'
      ,
    );
  };

Sử dụng Goong API

Load Map

https://tiles.goong.io/assets/goong_map_web.json?api_key={{goong_maptiles_key}}

Autocomplete

Sử dụng Api do Goong cung cấp với đường dẫn Api:

{{goong_api_url}}/Place/AutoComplete?api_key={{goong_api_key}}&input=

lưu ý :

  • goong_api_url:dường dẫn url
  • goongapi_key:mã Api
  • input: nội dung khi nhập vào search_

Directions

{{goong_api_url}}/Direction?vehicle=car&api_key={{goong_api_key}}&origin=21.01503750200004%2C105.79491335100005&destination=21.017693335000047%2C105.79068762200006&alternatives=true

lưu ý:

  • vehicle sử dụng bao gồm 'car', 'bike', 'truck', 'taxi', 'hd';
  • origin: điểm bắt đầu
  • destination:điểm kết thúc

Geocoding

{{goong_api_url}}/Geocode?address=143%20Trung%20K%C3%ADnh%2C%20Y%C3%AAn%20H%C3%B2a%2C%20C%E1%BA%A7u%20Gi%E1%BA%A5y%2C%20H%C3%A0%20N%E1%BB%99i&api_key={{goong_api_key}}

lưu ý:

  • address: địa chỉ tìm kiếm(cần được chuyển đổi về encodeURIComponent )

Tài Liệu

Hãy truy cập ví dụ