Hướng dẫn này dành cho những người mới bắt đầu làm quen với React và muốn bắt đầu sử dụng bản đồ Leaflet với React . Tôi hy vọng nó sẽ giúp bạn bắt đầu và đạt được mục tiêu của mình.

Tôi đã tạo một kho lưu trữ GitHub cho mã nguồn ở đây .

Một số lượng lớn các ứng dụng web hoặc ứng dụng di động mà chúng ta sử dụng trong cuộc sống hàng ngày đang sử dụng một số loại dịch vụ bản đồ như google maps hoặc bản đồ tờ rơi, nó đơn giản đã trở thành một phần không thể phủ nhận trong cuộc sống của chúng ta. Tôi muốn giúp những người mới bắt đầu sử dụng react và muốn sử dụng một số dịch vụ bản đồ cho dự án của họ. Trong phần hướng dẫn này, chúng tôi sẽ sử dụng bản đồ tờ rơi.

Chạy cục bộ

1. Sao chép kho lưu trữ:

git clone https://github.com/sayyedhammadali/react-with-leaflet.git

npm install

npm start

Lưu ý : Dự án cần hai gói cho bản đồ tờ rơi có tên là tờ rơi và tờ rơi phản ứng . Bạn có thể xem chi tiết phiên bản của các gói này trong package.json tệp. Các gói này đã được cài đặt và tồn tại trong node_modules thư mục nếu bạn làm theo bước đầu tiên Chạy cục bộ .

Tôi sẽ giải thích từng tệp liên quan cần thiết để tạo một bản đồ trang đầy đủ với các điểm đánh dấu có thể nhấp được để mở cửa sổ bật lên có tên địa điểm.

src / App.js

import React from 'react';
import MapView from './components/MapView';
import './App.css';
function App() {
  return (
    <div className="App">
      <MapView/>
    </div>
  );
}
export default App;

Tệp này là điểm bắt đầu của ứng dụng phản ứng nhập thành phần MapView.js trong ứng dụng chính.

src / App.css

.leaflet-container {  width: 100vw;  height: 100vh; }

Tệp css chỉ đặt chiều cao và chiều rộng của vùng chứa tờ rơi để nó lấp đầy khung nhìn (vw: viewport-width, vh: viewport-height).

src / components / VenueLocationIcon.js

import L from 'leaflet';
export const VenueLocationIcon = L.icon({
  iconUrl: require('../assets/venue_location_icon.svg'), 
  iconRetinaUrl: require('../assets/venue_location_icon.svg'),  
  iconAnchor: null,
  shadowUrl: null,
  shadowSize: null,  
  shadowAnchor: null,
  iconSize: [35, 35],
  className: 'leaflet-venue-icon'
});

Tệp này tạo một đối tượng cho biểu tượng điểm đánh dấu tùy chỉnh cho bản đồ tờ rơi. Trong trường hợp của chúng tôi, chúng tôi sử dụng tệp svg /src/assets/venue_location_icon.svgđể tạo VenueLocationIconđối tượng cho các điểm đánh dấu bản đồ.

src / components / MapView.js

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import data from '../assets/data';
import Markers from './VenueMarkers';
class MapView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentLocation: { lat: 52.52437, lng: 13.41053 },
      zoom: 12,
    }
  }
render() {
    const { currentLocation, zoom } = this.state;
    return (
      <Map center={currentLocation} zoom={zoom}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        />        <Markers venues={data.venues}/>
      </Map>
    );
  }
}
export default MapView;

Đầu tiên, chúng tôi nhập các thành phần Mapvà TileLayertừ react-leafletgói.

import { Map, TileLayer } from 'react-leaflet';

import 'leaflet/dist/leaflet.css';

Liên kết tới data.json

import data from '../assets/data';

import Markers from './VenueMarkers';

this.state = {
  currentLocation: { lat: 52.52437, lng: 13.41053 },
  zoom: 12,
}

Thành TileLayerphần thêm các ô cho bản đồ. Cuối cùng, chúng tôi chuyển data.venueslàm đạo cụ cho Markersthành phần để tất cả các điểm đánh dấu được hiển thị trên bản đồ.

return (
  <Map center={currentLocation} zoom={zoom}>
    <TileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
    />
    <Markers venues={data.venues}/>
  </Map>
);

import React, { Fragment } from 'react';
import {Marker} from 'react-leaflet';
import {VenueLocationIcon} from './VenueLocationIcon';
import MarkerPopup from './MarkerPopup';
const VenueMarkers = (props) => {
  const { venues } = props;
  const markers = venues.map((venue, index) => (
    <Marker 
      key={index} 
      position={venue.geometry} 
      icon={VenueLocationIcon}
    >
      <MarkerPopup data={venue}/>
    </Marker>
  ));
return <Fragment>{markers}</Fragment>
};
export default VenueMarkers;

Chúng tôi nhập Markerthành phần từ react-leafletgói,

import {Marker} from 'react-leaflet';

import {VenueLocationIcon} from './VenueLocationIcon';

import MarkerPopup from './MarkerPopup';

Bên trong mỗi điểm đánh dấu, chúng tôi chuyển venueđến các datađạo cụ của MarkerPopupthành phần.

Cuối cùng, chúng tôi trả lại tất cả markers. Chúng tôi sử dụng một fragmentthẻ để quấn chúng lại với nhau để không thêm các nút bổ sung vào DOM.

const { venues } = props;
const markers = venues.map((venue, index) => (
    <Marker 
      key={index} 
      position={venue.geometry} 
      icon={VenueLocationIcon}
    >
      <MarkerPopup data={venue}/>
    </Marker>
));
return <Fragment>{markers}</Fragment>};
export default VenueMarkers;

import React from 'react';
import {Popup} from 'react-leaflet';
const MarkerPopup = (props) => {
  const { name } = props.data;
  
  return  (
    <Popup>
      <div className='poup-text'>{name}</div>
    </Popup>
  );
};
export default MarkerPopup;

Chúng tôi nhập Popupthành phần từ react-leafletgói.

import {Popup} from 'react-leaflet';

const MarkerPopup = (props) => {
  const { name } = props.data;
  
  return  (
    <Popup>
      <div className='popup-text'>{name}</div>
    </Popup>
  );
};

• Khi nhấp vào từng điểm đánh dấu, hãy phóng to điểm đánh dấu;
• Khi nhấp vào từng điểm đánh dấu, hãy mở một thanh bên để hiển thị thêm thông tin địa điểm;
• Yêu cầu và hiển thị vị trí hiện tại trên bản đồ.

Tôi làm việc với tư cách là nhà phát triển Full stack tại Lucid.Studio và tôi rất muốn học hỏi và chia sẻ kiến ​​thức của mình với cộng đồng. Nếu bạn thích tác phẩm của tôi, thì hãy kết nối với tôi trên LinkedIn: Sayyed Hammad Ali .

// HASTA LA VISTA BABY
//                      ______
//                    <((((((\\\
//                    /      . }\
//                    ;--..--._|}
// (\                 '--/\--'  )
//  \\                | '-'  :'|
//   \\               . -==- .-|
//    \\               \.__.'   \--._
//    [\\          __.--|       //  _/'--.
//    \ \\       .'-._ ('-----'/ __/      \
//     \ \\     /   __>|      | '--.       |
//      \ \\   |   \   |     /    /       /
//       \ '\ /     \  |     |  _/       /
//        \  \       \ |     | /        /
//         \  \      \        /