时间戳

首页 > 解决方案 > React & Leaflet：找不到地图容器

javascript - React & Leaflet：找不到地图容器

问题描述

我尝试使用函数组件来加载传单地图，但出现“未找到地图容器”的错误消息。我找到了一个添加<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？

标签： javascriptreactjsleaflet

解决方案

从您包含的代码来看，您似乎没有使用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 地图图块提供程序（因为您使用的是自定义的）和一些固定图标，它似乎可以正常工作

演示

推荐阅读