React 和 Leaflet：找不到地图容器

Question

我尝试使用函数组件加载leafletmap，但出现“找不到地图容器”的错误。我找到了将<div id="map"> 添加到DOM 的解决方案。我找不到在函数组件中执行此操作的方法。我最终使用类组件来执行此操作，并且它有效：

import React from "react";
import L, { LeafletMouseEvent } 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,
});

class LeafletMap extends React.Component {
  componentDidMount() {
    this.map();
  }

  map() {
    L.Marker.prototype.options.icon = DefaultIcon;
    var mapSW = new L.Point(0, 960),
      mapNE = new L.Point(960, 0);
    var map = L.map("map", { crs: L.CRS.Simple }).setView([0, 0], 4);

    L.tileLayer("/assets/maps/map0/{z}/{x}/{y}.png", {
      tileSize: 32,
      minZoom: 4,
      maxZoom: 5,
      noWrap: true,
    }).addTo(map);

    var maxBounds = L.latLngBounds(
      map.unproject(mapSW, map.getMaxZoom()),
      map.unproject(mapNE, map.getMaxZoom())
    );
    map.setMaxBounds(maxBounds);

    var marker = L.marker([0, 0], {
      draggable: true,
    }).addTo(map);
    marker.bindPopup("<b>Our hero!</b>").openPopup();
    function onMapClick(e: LeafletMouseEvent) {
      let tileSize = new L.Point(32, 32);
      let pixelPoint = map.project(e.latlng, map.getMaxZoom()).floor();
      let coords = pixelPoint.unscaleBy(tileSize).floor()
      alert("You clicked the map at " + coords);
    }
    map.on("click", onMapClick);
  }

  render() {
    return <div id="map"></div>;
  }
}

export default LeafletMap;

这是调用 LeafletMap 组件的地方：

const comp: React.FC<RouteComponentProps> = () => {
  return (
    <div>
      <Grid columns={2}>
        <Grid.Column>
          <LeafletMap/>
        </Grid.Column>
        // codes
      </Grid>
    </div>

现在我需要使用钩子功能，所以我必须使用函数组件。如何解决“找不到地图容器”错误或使用函数组件将地图元素添加到 DOM？

Answer 1

从您包含的代码来看，您似乎没有使用react-leaflet，而是使用本机传单代码。

将类组件用作函数应该不是问题。将componentDidMount替换为效果挂钩并移除渲染方法

 export default function LeafletMap() {
      useEffect(() => {
        map();
      }, []);
    ...rest of code same as yours only remove render method
      return <div id="map" style={{ height: "100vh" }}></div>;
    }

由于您使用的是打字稿，因此错误可能是由于类型错误而导致的。

我使用了一个 openstreet 地图图块提供程序（因为您使用的是自定义）和一些固定图标，它似乎可以正常工作

Demo

Answer 2

我有同样的错误，工作解决方案在这里，

同样的问题是Leaflet: Map container not found

引起的错误

div id="map" 必须在调用 L.map('map') 之前添加到 dom。

解决方法是：

         useEffect(() => {

这是我的工作 app.js：

           import React, { useState, useEffect } from 'react';



           import './App.css';

           import L from 'leaflet';
           import 'leaflet/dist/leaflet.css';


           function App() {






          // Similar to componentDidMount and componentDidUpdate:
          useEffect(() => {



                              let current_lat = 28.625789;
                              let current_long = 77.0547899;
                              let current_zoom = 16;
                              let center_lat = current_lat;
                              let center_long = current_long;
                              let center_zoom = current_zoom;




                              // The <div id="map"> must be added to the dom before calling L.map('map')
                                let map = L.map('map', {
                                  center: [center_lat, center_long],
                                  zoom: center_zoom
                                });

                                L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
                                  attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                                }).addTo(map);



          });





                  return (


              

                                <div class="right-sidebar-container">
                                        
                                  <div id="map">

                                  </div>
                                
                              </div>

                  );





         } // app







     export default App;