[React] 주소만 입력하면 OK인 Google map컴포넌트
11479 단어 ComponentrecomposeReactGoogleMapsAPI
원형 복사에서 사용할 수 있습니다.
오류 처리도 있습니다.
좀 더 똑똑한 쓰는 법이 있으면 알려주세요. .
완성형
npm
// React、PropTypesは省略します。
npm i -S recompose Geocode react-google-maps
구성요소
Map.jsx
import React from 'react';
import PropTypes from 'prop-types';
import Geocode from 'react-geocode';
import {
compose,
lifecycle,
withState,
} from 'recompose';
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
} from 'react-google-maps';
const apiKey = "あなたのAPIKEY";
const MapWithAMakredInfoWindow = compose(
withScriptjs,
withGoogleMap,
)(({
lat,
lng,
}) => (
<GoogleMap
defaultZoom={15}
defaultCenter={{ lat, lng }}
>
<Marker position={{ lat, lng }} />
</GoogleMap>
));
const Map = compose(
withState('geocode', 'setGeocode', { lat: 0, lng: 0 }),
lifecycle({
componentDidMount() {
Geocode.setApiKey(apiKey);
Geocode.fromAddress(this.props.location)
.then((response) => {
const { lat, lng } = response.results[0].geometry.location;
this.setState({
lat,
lng,
});
})
.catch(() => {
this.setState({
lat: undefined,
lng: undefined,
});
});
},
}),
)(({
lat,
lng,
location,
}) => {
if (!lat || !lng) {
return (
<div>
<p>住所が誤っています。</p>
</div>
);
}
return (
<div className="access-map-wrapper">
<MapWithAMakredInfoWindow
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=3.exp&libraries=geometry,drawing,places`}
loadingElement={<div style={{ height: '100%' }} />}
containerElement={<div style={{ height: '30vmax' }} />}
mapElement={<div style={{ height: '100%' }} />}
lat={lat}
lng={lng}
location={location}
/>
<a href={`comgooglemaps://?daddr=${lat},${lng}`}>
Googlemap アプリで開く
</a>
</div>
);
});
Map.propTypes = {
location: PropTypes.string.isRequired,
};
export default Map;
이제 호출자로부터 간단하게
<Map location="表示したい住所" />
그냥 부를 수 있으므로 편리하네요 ~
Reference
이 문제에 관하여([React] 주소만 입력하면 OK인 Google map컴포넌트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kosuke0820/items/8dff60cc79f9ca1b58ed텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)