리팩터링 GoogleMap 구성 요소에 대한 아이디어
import { useRef, useEffect, useState } from 'react'
import { Wrapper } from '@googlemaps/react-wrapper'
const GoogleMap = ({ center, zoom, libraries = [], onLoad }) => {
const ref = useRef()
const [googleMap, setGoogleMap] = useState(null)
const handleCallback = (status, loader) => {
loader.load().then((google) => {
setGoogleMap(google.maps)
})
}
const initMap = () => {
return new googleMap.Map(ref.current, {
center,
zoom,
})
}
useEffect(() => {
if (googleMap) {
const map = initMap()
const services = {}
libraries.forEach((library) => {
console.log('looping...')
services[library] = new googleMap.places.PlacesService(map) // use services mapping, but I'm too lazy to do that right now
})
onLoad &&
onLoad({
map,
...services,
})
}
}, [googleMap])
return (
<Wrapper apiKey="" libraries={libraries} callback={handleCallback}>
<div
ref={ref}
style={{ width: '100%', height: '950px', margin: '0 auto' }}
>
This is map
</div>
</Wrapper>
)
}
function App() {
const center = { lat: 34.0430058, lng: -118.2673597 }
const zoom = 12
const handleMapLoaded = (services) => {
services.places.nearbySearch(
{
location: center,
radius: '500',
type: ['restaurant'],
},
(results, status) => {
console.log('status:', status)
console.log('results:', results)
}
)
}
return (
<div>
<GoogleMap
center={center}
zoom={zoom}
libraries={['places']}
onLoad={handleMapLoaded}
/>
</div>
)
}
export default App
왜요?
windows.google
와 같은 전역 변수를 사용하고 싶지 않습니다.개선
Reference
이 문제에 관하여(리팩터링 GoogleMap 구성 요소에 대한 아이디어), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ilumin/idea-on-refactor-googlemap-component-g73텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)