Delivery Dashboard.2 (google map)

---

Delivery Dashboard1에서
나의 page에 구글 map을 불러오고,
현재 나의 위치를 확인하고,
지정한 위치에서 나의 위치로 지도를 이동시키는거 까지 해봄.
이제 지정한 위치에서 나의 위치로 이동하는 도로를 painting해본다.

---

https://developers.google.com/maps/documentation/javascript/using-typescript

npm i -D @types/google.maps

!!!complierOptions에 추가할것.in tsconfig.js안에있음.
!!!공식 문서 참조

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

{
    ...
    "compilerOptions": {
        ...
        "typeRoots": [
            "node_modules/@types",
        ],
        ...
    }
}

길을 painting하기 위해서 console.cloud.google.com에서
Directions API를 활성화시켜야 함.

Delivery Dashboard 1에서 갔었던 탐색메뉴-api-라이브러리
그기임.
Directions API를 활성화한다.

사용방법

https://developers.google.com/maps/documentation/javascript/geocoding
-->주소를 가져다가 좌표로 바꿔줌

Reverse Geocodiong은 좌표를 주소로 바꿔줌,

geocoding을 검색해서 API를 활성화시켜줄것!!Enable시킬것

참조할것!!!

import React, { useEffect, useState } from 'react'
import GoogleMapReact from 'google-map-react'

interface ICoords {
  lat: number
  lng: number
}

interface IDriverProps {
  lat: number
  lng: number
  $hover?: any
}

const Driver: React.FC<IDriverProps> = () => <div className="text-lg">🚚</div>

export const Dashboard = () => {
  const [driverCoords, setDriverCoords] = useState<ICoords>({ lat: 0, lng: 0 })
  const [map, setMap] = useState<google.maps.Map>()
  const [maps, setMaps] = useState<any>()
  const onSuccess = ({
    coords: { latitude, longitude },
  }: GeolocationPosition) => {
    setDriverCoords({ lat: latitude, lng: longitude })
  }
  const onError = (error: GeolocationPositionError) => {
    console.log(error)
  }
  useEffect(() => {
    navigator.geolocation.watchPosition(onSuccess, onError, {
      enableHighAccuracy: true,
    })
  }, [])
  useEffect(() => {
    if (map && maps) {
      map.panTo(new google.maps.LatLng(driverCoords.lat, driverCoords.lng))
      
      ///geoCoder사용법~
      const geocoder = new google.maps.Geocoder()
      geocoder.geocode(
        {
          location: new google.maps.LatLng(driverCoords.lat, driverCoords.lng),
        },
        (result, status) => {
          console.log(result, status)
        }
      )
    }
  }, [driverCoords.lat, driverCoords.lng])
  ///현재 위치에서 이동한 위치로가는 도중의 길을 주소로 찍어줌.
  ///아래 사진은 현재 위치(순천)에서 도쿄로 찍었을때, 주소를 찍어줌.
  

  const onApiLoaded = ({ map, maps }: { map: any; maps: any }) => {
    map.panTo(new google.maps.LatLng(driverCoords.lat, driverCoords.lng))
    setMap(map)
    setMaps(maps)
  }
  return (
    <div>
      <div style={{ height: '70vh', width: '100%' }}>
        <GoogleMapReact
          yesIWantToUseGoogleMapApiInternals
          onGoogleApiLoaded={onApiLoaded}
          bootstrapURLKeys={{ key: 'AIzaSyCQBuKy-bkomVZm4BTMYc30cCDvtCpateI' }}
          defaultCenter={{
            lat: 35.166535,
            lng: 126.9779692,
          }}
          defaultZoom={15}
        >
          <Driver lat={driverCoords.lat} lng={driverCoords.lng} />
        </GoogleMapReact>
      </div>
    </div>
  )
}