리팩터링 GoogleMap 구성 요소에 대한 아이디어

10410 단어 mapcomponentreact
암호:

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와 같은 전역 변수를 사용하고 싶지 않습니다.
  • 플러그인 가능해 보입니다. 지원하는 라이브러리를 넣으면 객체를 로드하고 반환합니다
  • .
  • 다른 서비스의 논리를 노출합니다(예: 가까운 장소 및 더 이상 GoogleMap 구성 요소에 넣을 필요 없음)
  • .

    개선
  • 맵 마커를 소품으로 렌더링할 수 있음
  • 고급 구성 요소가 자식으로 렌더링될 수 있음
  • 좋은 웹페이지 즐겨찾기