리액트 google-map-react directionservice

Question

구글지도에 direction service를 사용해서 경로를 표시하는 중입니다.현재는 그 출발지와 도착지가 코드로 구현되어 있는데 이걸웹에서 위도, 경도를 줬을때 경로를 갱신시켜서 새 경로를 다시 지도에 표시하는 방법이 있을까요?import React, {useEffect, useState} from "react"; import GoogleMapReact from "google-map-react"; import useStyles from './styles'; import * as BsIcons from 'react-icons/bs'; const Map=({setCoordinates, coordinates})=>{ const classes = useStyles(); useEffect(()=>{ console.log(coordinates); },[coordinates]) const google = window.google; const apiIsLoaded = (map, maps) => { const directionsService = new google.maps.DirectionsService(); const directionsRenderer = new google.maps.DirectionsRenderer(); directionsRenderer.setMap(map); const origin = {lat:52.51834, lng:13.40714}; const destination = {lat:52.52834, lng:13.4171}; directionsService.route( { origin: origin, destination: destination, travelMode: google.maps.TravelMode.DRIVING, }, (result, status) => { if (status === google.maps.DirectionsStatus.OK) { directionsRenderer.setDirections(result); } else { console.error(`error fetching directions ${result}`); } } ); }; return(

{ setCoordinates({lat:e.center.lat, lng:e.center.lng}); }} onChildClick={''} yesIWantToUseGoogleMapApiInternals onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps)} >

); } export default Map;

kakaz · Answer

google-map-react &#61;> &#64;react-google-maps/api로 모듈 바꿔서 해결

리액트 google-map-react directionservice

1개의 답변

Q&A 목록