Next 페이지에서react-google-maps/api를 이용하여 덮어쓰기 그림 만들기
일단 완성은 이거.
나는 이런 로컬 앱을 만들고 싶어서 지도를 만들었지만 데이터를 한 번 올리고 싶어서 자신의 사이트에 가 보았다.
로컬 설치는 템플릿을 통해 직접 수행할 수 있습니다.하지만 구축을 위해 오류를 없애는 것은 힘들다.
컨디션
Next.웹 페이지 정보
Google Cloud Platform으로 API 발행
GCP를 사용하여 Maps JavaScript API를 발행하고 Key를엔비에 넣다
NEXT_PUBLIC_GOOGLE_MAP_API_KEY=コピったあなたのAPI Key
react-google-maps에서 설치하고 싶은 모형을 찾습니다
설치 설명서를 보실 수 있습니다.
React의 버전은 새 버전에서 사용하는 구성 요소와 다르기 때문에 먼저 읽어 보십시오.
방금 복사한 APIKey를 넣으면 샘플을 볼 수 있습니다.
이번에는 SVG로 옛 지도의 데이터를 준비해 지도에 부착해 투과하는 애플리케이션을 만들기 때문에 그라운드 오버레이를 사용한다.
Overlay 가입해보세요.
일단 설치.
yarn add @react-google-maps/apiComponent 만들어 주세요.index.tsx
import React from 'react'
import { GoogleMap, LoadScriptNext, GroundOverlay } from '@react-google-maps/api'
const key = process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY
// Google Mapを描画するサイズ
const containerStyle = {
width: '90vw',
height: '58vh',
}
// マップの中央（Google Mapでポイントすれば出てくる）
const center = {
lat: 40.513103, // 緯度
lng: 141.4897, // 経度
}
// オーバーレイする画像の右上と左下の点
const bounds = {
north: 40.52,
south: 40.4942,
east: 141.513105,
west: 141.4666
}
const OverlayMap = () => {
return (
<LoadScriptNext googleMapsApiKey={key}>
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={16}
// マップのスタイル
options={{
gestureHandling: 'greedy',
streetViewControl: false,
fullscreenControl: false,
}}
>
<GroundOverlay
key={'url'}
url="載せたい画像のURL"
bounds={bounds}
opacity={0.5}
/>
</GoogleMap>
</LoadScriptNext>
)
}
그냥 바운드가 잘못된 것 같아서요
어쨌든 무시하고 슬라이더로 지도의 불투명도를 바꾸자.
install react slider component, onChang에서 <Overlay>에 불투명한 값 전달
yarn add @mui/material/Box @mui/material/Slider
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';
const OverlayMap = () => {
const [inputValue, setInputValue] = React.useState(0.5)
const handleChange = (e) => {
setInputValue(e.target.value)
}
return (
<>
<LoadScriptNext googleMapsApiKey={key}>
<GoogleMap>
<GroundOverlay
key={'url'}
url="載せたい画像のURL"
bounds={bounds}
opacity={inputValue}
/>
</GoogleMap>
</LoadScriptNext>
<Box sx={{ width: '80vw' }}>
<Slider
aria-label="opacity"
defaultValue={0.5}
step={0.1}
marks
min={0.0}
max={1.0}
onChange={(e) => handleChange(e)}
/>
</Box>
</>
)
}
이렇게 하면 불투명도는 슬라이더로 변경할 수 있다.
그럼, 구축을 위해 bounds의 오류를 바로잡읍시다.
bounds는 구글입니다.maps.LatLng으로 설정
index.tsx
-const bounds = {
- north: 40.52,
- south: 40.4942,
- east: 141.513105,
- west: 141.4666
-}
+ const sw = new google.maps.LatLng(40.4942, 141.4666)
+ const ne = new google.maps.LatLng(40.52, 141.513105)
+ const bounds = new google.maps.LatLngBounds(sw, ne)
그럼 yarn build을 사용해 보세요.
Google is not defined 해결
아이구
검색해 봤는데 new Google입니다.map.LatLng 아님()
new window.google.map.LatLng()
꼭 그래야 할 것 같아.
그리고 어떤 사람이 윈도우를 not defined라고 했어요.
Next가 SSR이기 때문에 서버 측에서 처리할 때 window 브라우저 측에만 있는 전역 대상을 참조하려고 하는 중 오류가 발생했습니다.
따라서, window가undefined일 때의 처리는if로 묶여 있습니다.
윈도우즈 해결
window 처리를 사용하여 모두if에 들어갑니다.
index.tsx
const OverlayMap = () => {
const [inputValue, setInputValue] = React.useState(0.5)
const handleChange = (e) => {
}
const OverlayData = () => {
if (typeof window !== 'undefined') {
const sw = new window.google.maps.LatLng(40.4942, 141.4666)
const ne = new window.google.maps.LatLng(40.52, 141.513105)
const bounds = new window.google.maps.LatLngBounds(sw, ne)
return (
<GroundOverlay
key={'url'}
url="載せたい画像のURL"
bounds={bounds}
opacity={inputValue}
/>
)
}
}
return (
<div>
<LoadScriptNext googleMapsApiKey={key}>
<GoogleMap>
<OverlayData />
</GoogleMap>
</LoadScriptNext>
<p>古地図不透明度</p>
<Box>
</Box>
</div>
)
}
완성
나는 이렇게 yarn build을 하면 무사할 거라고 생각한다!
다만, react-google-maps는 4년 전부터 업데이트되지 않았기 때문에 정식 제품으로 만들려면 다른 방법이 타당할 수 있습니다.
github 여기 있습니다.
Reference
이 문제에 관하여(Next 페이지에서react-google-maps/api를 이용하여 덮어쓰기 그림 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/renshimosawa/articles/6d3a5fa5d90cbf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
