Uncaught Error: Map container is already initialized

Question

我正在使用 React JS 制作网页。我的目标是在前端显示地图。我正在使用 react-leaflet npm 包。但是，我收到以下错误：

错误...

"Uncaught Error: Map container is already initialized.
at NewClass._initContainer (Map.js:1105:1)
at NewClass.initialize (Map.js:136:1)
at new NewClass (Class.js:22:1)
at MapContainer.js:10:1
at commitHookEffectListMount (react-dom.development.js:22969:1)
at invokePassiveEffectMountInDEV (react-dom.development.js:24948:1)
at invokeEffectsInDev (react-dom.development.js:27142:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27121:1)
at flushPassiveEffectsImpl (react-dom.development.js:26865:1)
at flushPassiveEffects (react-dom.development.js:26801:1)"

以下是我的代码：

import React from 'react'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';


const Map = () => {
return (
    <MapContainer center={[51.505, -0.09]} zoom={13}>
        <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
            <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
        </Marker>
    </MapContainer>
)
}

Answer 1

这对我来说似乎是一个重要的问题。因此，为了完整起见，在这里回答。这个是根据this link shared by @Satya S in the comments. React leaflet v3 won't work with reactJS v18 (as of the time of writing this response, things may change later. Use thislink来验证的），至少在使用并发模式的时候是这样。请尝试针对 reactJS 版本 18 的 React 传单的版本 4 alpha。

Answer 2

这对我有用。希望对你有帮助。

import React, { useEffect } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";

let DefaultIcon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow,
});

export default function Map() {
useEffect(() => {
    var container = L.DomUtil.get("map");

    if (container != null) {
    container._leaflet_id = null;
    }
    var map = L.map("map").setView([51.505, -0.09], 13);
    L.tileLayer(
    "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
    {
        attribution:
        'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: "mapbox/streets-v11",
        tileSize: 512,
        zoomOffset: -1,
        accessToken:
        "pk.eyJ1IjoidGFyLWhlbCIsImEiOiJjbDJnYWRieGMwMTlrM2luenIzMzZwbGJ2In0.RQRMAJqClc4qoNwROT8Umg",
    }
    ).addTo(map);
    L.Marker.prototype.options.icon = DefaultIcon;
    var marker = L.marker([51.5, -0.09]).addTo(map);
    marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
}, []);
return <div id="map" style={{ height: "100vh" }}></div>;
}

不要忘记将这些 CSS 和 JS 插入您的 index.html 头：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>

Uncaught Error: Map container is already initialized

Uncaught Error: Map container is already initialized

leaflet

reactjs

react-leaflet