Блог

Я использую react-leaflet для создания карты в моем приложении react. В компоненте Map я пытаюсь отобразить массив стран и вернуть CirclrMarker для каждой страны. Он работает правильно, когда я делаю это с компонентом Marker, но с компонентом CirclrMarker код переходит в бесконечный цикл.

код:

 import React, { useState } from 'react'
import { Map, TileLayer, Marker, Popup, Circle, CircleMarker } from 'react-leaflet'
import L from 'leaflet'

import './Map.css'

function LeafletMap({ position, zoom, data }) {
    const markerIcon = L.icon({
        iconSize: [25, 41],
        iconAnchor: [10, 41],
        popupAnchor: [2, -40],
        // specify the path here
        iconUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png",
        shadowUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png"
    });
    return (
        <Map className="map" center={position} zoom={zoom}>
            <TileLayer
                attribution='amp;amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
             {data.map((country) => {
                return (
                <CircleMarker
                position={{ lat: country.countryInfo.lat, lng: country.countryInfo.long }}>
                    <Popup>{country.country}</Popup>
                </CircleMarker>)
            })} 
            <Marker position={position} zoom={zoom} icon={markerIcon}>
                <Popup> {zoom} </Popup>
            </Marker>
        </Map>
    )
}

export default LeafletMap
  

У вас есть какие-либо идеи, почему это происходит?

Добавьте радиус к circlemarker:

 <CircleMarker position={{ lat: country.countryInfo.lat, lng: country.countryInfo.long }} radius={100}>
      <Popup>{country.country}</Popup>
</CircleMarker>