react-leaflet.js 구현 방법(반응 프로젝트의 오픈 소스 맵 🗺️)

React-leaflet은 일반적으로 작고 사용하기 쉬운 다루기 힘든 지도를 만들기 위한 오픈 소스 Javascript 라이브러리로 기본적으로 신용 카드에 청구되지 않기 때문에 react-google-maps에 대한 탁월한 대안입니다. 따라서 사용을 시작하기 위한 빠르고 쉬운 가이드가 있습니다.

1. 프로젝트에 라이브러리 설치

---- for npm
npm install leaflet react-leaflet 
---- for yarn
yarn add leaflet react-leaflet 

이 단계에서 아마도 이 오류에 직면하게 될 것입니다.

Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'

이 문제를 해결하려면:

node_modules 폴더 삭제

프로젝트가 있는 경로 변경

바이러스 백신을 중지하고 Dropbox와의 동기화를 중지하십시오

.

npm 설치 실행

그것은 나를 위해 일했지만 다른 솔루션이 있다면 의견에 공유하는 것이 좋습니다 !!

2. 스타일 가져오기

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">

index.html 파일을 찾아 leaflet.css에서 스타일에 대한 링크를 추가해야 합니다. 그렇게 하지 않으면 지도가 무질서하게 보이고, 잘리고, 패치로 보일 것입니다.

3. 스타일 컨테이너 추가

<style>
.leaflet-container {
    height: 400px;
    width: 400px;
}
</style>

높이와 너비를 설정하지 않으면 지도가 전혀 표시되지 않기 때문에 이 단계도 정말 중요합니다.

4. 필요에 따라 구성 요소 생성

import React , { Component }from 'react'
import { Map as LeafletMap, TileLayer,  Marker, Popup } from 'react-leaflet';
import './map-component.css';

class SimpleMap extends Component {
  render() {
    return (
      <LeafletMap
        center={[60, 10]}
        zoom={6}
        maxZoom={10}
        attributionControl={true}
        zoomControl={true}
      >
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={[60, 10]}>
          <Popup>
            Popup for any custom information.
          </Popup>
        </Marker>
      </LeafletMap>
    );
  }
}

export default SimpleMap

지도에 대해 원하는 만큼 많은 속성을 넣을 수 있습니다. 저는 documentation to the examples을 그대로 두지만 이전 단계에서 스타일을 호출하는 것을 잊지 마십시오.

마지막으로 이것은 내 프로젝트에서 어떻게 보이는지에 대한 작은 그림입니다. 보시다시피 페이지에 다른 구성 요소를 넣을 수 있으며 보기 좋게 보일 것입니다.


이 글이 여러분 모두에게 도움이 되기를 진심으로 바라며 읽어주셔서 감사합니다!!