google map polyline direction 여러 라인 보여주기.

GPS좌표들을 선으로 그려주는 방법이다.

 

전역 {arr}로 위도,경도를 갖고 있는 배열을 받는다. 

* 이 부분은 서버에서 받아오는 데이터로 변경하거나.. 로컬디비에 저장해서 쓰는 방법으로 변경해야 한다. 

 

그 배열들을 {dataSettings}라는 함수에서 시작좌표,끝좌표를 갖는 데이터로 변경한다. 

 

이유는 polyline을 그리기 위해선 시작좌표 끝좌표를 하나의 polyline으로 처리해야 하기 때문.

 

 

 

 

 

 

 

------------------- 코드 전문 -------------------------

 

import React, { useState } from 'react';

 

import { View, SafeAreaView, StyleSheet, FlatList, Button, Text } from 'react-native';

 

import MapView, {Marker} from 'react-native-maps';

 

import PolylineDirection from '@react-native-maps/polyline-direction';

 

const a = -36.888300;

const b = 174.608994;

const origin1 = { latitude: a, longitude: b };

const destination1 = { latitude: -36.884421, longitude: 174.611068 };

 

const origin2 = { latitude: -36.884421, longitude: 174.611068 };

const destination2 = { latitude: -36.881972, longitude: 174.615942 };

 

const GOOGLE_MAPS_APIKEY = 'googleApiKey';

 

const arr = [

    {aaa:-36.888300,bbb:174.608994,ccc:"on",ddd:"시간"},  

    {aaa:-36.884421,bbb:174.611068,ccc:"on",ddd:"시간"},   

    {aaa:-36.881972,bbb:174.615942,ccc:"on",ddd:"시간"},

    {aaa:-36.879012,bbb:174.621020,ccc:"on",ddd:"시간"},

    {aaa:-36.874358,bbb:174.622397,ccc:"on",ddd:"시간"},

    {aaa:-36.877665,bbb:174.630180,ccc:"on",ddd:"시간"}

]

 

function MyComponent() {

    const [count, setCount] = useState(2);

    const [polyArr, setPoly] = useState([]);

 

    React.useEffect(() => {

        (async () => {

            const data = await dataSettings(arr);

            setPoly(data);

        })()

    }, []);

 

  return (

    <View style={{ flex: 1 }}>

      <MapView

        style={{ flex: 1 }}

        region={{

          latitude: a,

          longitude: b,

          latitudeDelta: 0.01,

          longitudeDelta: 0.01,

        }}>

 

        

        <Marker coordinate={{ latitude: -36.888300, longitude: 174.608994 }} />

 

        {polypoly(polyArr)}

      </MapView>

    </View>

  );

}

async function dataSettings(arr_data) {

    let returnArr = [];

    for (let i=0; i<arr_data.length-1; i++) {

        let data = arr_data[i];

        let nextData = arr_data[i+1];

        returnArr.push({startLati:data.aaa, startLongi:data.bbb, endLati:nextData.aaa, endLongi:nextData.bbb, onOff:data.ccc, time:data.ddd})

    }

 

    for (let i=0; i<returnArr.length; i++) {

        await fetch('https://maps.googleapis.com/maps/api/geocode/json?address=' + returnArr[i].startLati + ',' + returnArr[i].startLongi + '&key=' + GOOGLE_MAPS_APIKEY)

           .then((response) => response.json())

           .then((responseJson) => {

               console.log('??????? ADDRESS GEOCODE is BACK!! => ' + JSON.stringify(responseJson));

            })

    }

 

    return returnArr;

}

function polypoly(imsi) {

    let aaa = [];

    console.log("뻉" + imsi.length);

    let leng = imsi.length;

    for (let i=0; i<leng; i++) {

        aaa.push(

        <PolylineDirection

          origin={{latitude: imsi[i].startLati, longitude: imsi[i].startLongi}}

          destination={{latitude: imsi[i].endLati, longitude: imsi[i].endLongi}}

          apiKey={GOOGLE_MAPS_APIKEY}

          strokeWidth={i+1}

          strokeColor="#12bc00"

        />);

    }

    return aaa;

}

 

export default MyComponent;

 

 

 

// 함수명, 변수명이 이상한건 그냥 넘어가 주세요 ^^