google map react
Support for React 18
google-map-react 는 Google Maps API의 작은 세트를 통해 작성된 구성요소입니다. 이를 통해 Google 지도에 모든 React 구성요소를 렌더링할 수 있습니다. 완전히 동형이며 서버에서 렌더링할 수 있습니다. 또한 Google Maps API가 로드되지 않은 경우에도 브라우저에서 지도 구성요소를 렌더링할 수 있습니다. 내부의 조정 가능한 호버 알고리즘을 사용합니다. 즉, 지도의 모든 객체를 호버링할 수 있습니다.
이를 통해 이 예와 같은 인터페이스를 생성할 수 있습니다 (테이블 스크롤, 지도 확대/축소/이동, 마커에 마우스 올리기/클릭, 테이블 행 클릭 가능).
간단한 경우에는 GoogleMapReact 구성요소의 하위 항목에 lat 및 lng props를 추가하기만 하면 됩니다.
jsbin에서 실제 작동 모습을 확인하세요.
import React from "react" ;
import GoogleMapReact from 'google-map-react' ;
const AnyReactComponent = ( { text } ) => < div > { text } < / div > ;
export default function SimpleMap ( ) {
const defaultProps = {
center : {
lat : 10.99835602 ,
lng : 77.01502627
} ,
zoom : 11
} ;
return (
// Important! Always set the container height explicitly
< div style = { { height : '100vh' , width : '100%' } } >
< GoogleMapReact
bootstrapURLKeys = { { key : "" } }
defaultCenter = { defaultProps . center }
defaultZoom = { defaultProps . zoom }
>
< AnyReactComponent
lat = { 59.955413 }
lng = { 30.337844 }
text = "My Marker"
/ >
< / GoogleMapReact >
< / div >
) ;
}npm:
npm install --save google-map-react
방사:
yarn add google-map-react
기본 Google 지도 마커, 풍선 및 기타 지도 구성요소 대신 멋진 애니메이션 반응 구성요소를 지도에 렌더링할 수 있습니다.
서버에서 렌더링됩니다. (검색 엔진을 환영합니다) (브라우저 개발 도구에서 자바스크립트를 비활성화하고 예제 페이지를 다시 로드하여 작동 방식을 확인할 수 있습니다)
Google Maps API가 로드되기 전(또는 로드되지 않은 경우에도) 지도의 구성요소를 렌더링합니다.
페이지 상단에 <script src= 태그를 배치할 필요가 없습니다. Google Maps API는 GoogleMapReact 구성요소를 처음 사용할 때 로드됩니다.
onGoogleApiLoaded 사용하여 Google 지도 map 및 maps 객체에 액세스할 수 있습니다. 이 경우 yesIWantToUseGoogleMapApiInternals true 로 설정해야 합니다.
...
const handleApiLoaded = ( map , maps ) => {
// use map and maps objects
} ;
...
< GoogleMapReact
bootstrapURLKeys = { { key : /* YOUR KEY HERE */ } }
defaultCenter = { this . props . center }
defaultZoom = { this . props . zoom }
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded = { ( { map , maps } ) => handleApiLoaded ( map , maps ) }
>
< AnyReactComponent
lat = { 59.955413 }
lng = { 30.337844 }
text = "My Marker"
/ >
< / GoogleMapReact > PST: yesIWantToUseGoogleMapApiInternals true로 설정해야 합니다.
여기 예
이제 지도의 모든 객체에 마우스를 올릴 수 있습니다(그러나 원하는 경우 CSS 마우스 오버 선택기를 계속 사용할 수 있습니다). 여기에서 축소를 시도해도 거의 모든 지도 표시 위에 마우스를 올려놓을 수 있습니다.
지도에 반응 구성 요소 배치: 간단(출처)
맞춤 지도 옵션: 예(출처)
호버 효과: 단순 호버(출처); 거리 호버(출처)
GoogleMap 이벤트: 예시(출처)
예제 프로젝트: main(소스); balderdash (메인과 동일한 소스)
Hooks를 사용한 클러스터링 예( 신규 : 소스, 기사) Clustering-with-hooks
클러스터링 예시(소스) google-map-clustering-example
수천 개의 마커를 렌더링하는 방법( 신규 : 소스) google-map-thousands-markers
예: 예 이전 예
jsbin 예 jsbin 예
webpackbin 예제( 신규 ) webpackbin 예제가 포함된 문서(진행 중)
로컬 개발 예제(신규) 개발 예제
여기에서 문서를 찾을 수 있습니다.
API 참조
새로운 문서(진행 중)
로컬 개발은 두 부분으로 나뉩니다(이상적으로는 두 개의 탭을 사용함).
먼저, 롤업을 실행하여 src/ 모듈을 관찰하고 변경 사항이 있을 때마다 자동으로 dist/ 로 다시 컴파일합니다.
npm start # runs rollup with watch flag 두 번째 부분에서는 모듈의 로컬 버전에 연결된 example/ create-react-app을 실행합니다.
# (in another tab)
cd example
npm start # runs create-react-app dev server 이제 src/ 의 라이브러리나 예제 앱의 example/src 를 변경할 때마다 create-react-app 이 로컬 개발 서버를 실시간으로 다시 로드하므로 구성 요소를 실시간으로 반복할 수 있습니다.
예제 앱을 실행하는 동안 Module not found: Can't resolve 'google-react-map'... 오류가 발생하는 경우 로컬 개발 모듈을 수동으로 연결해야 합니다. 다음 단계를 시도해 보세요.
npm linkexample/ 로 이동하여 (다른 종속성을 설치한 후) 다음을 실행합니다. npm link google-map-reactMIT
우리는 적극적으로 기여자를 찾고 있습니다. 소유자나 공동작업자에게 메시지를 보내주세요.
