Javascript 反应&；传单：找不到地图容器_Javascript_Reactjs_Leaflet

Javascript 反应&；传单：找不到地图容器

javascript reactjs leaflet

Javascript 反应&；传单：找不到地图容器,javascript,reactjs,leaflet,Javascript,Reactjs,Leaflet,我试图使用function component加载地图，但出现了一个错误，显示“Map container not found”。我找到了一个解决方案，就是将添加到DOM中。我找不到在函数组件中执行此操作的方法。我最终使用class component来实现这一点，它可以工作： import React from "react"; import L, { LeafletMouseEvent } from "leaflet"; import "le

我试图使用function component加载地图，但出现了一个错误，显示“Map container not found”。我找到了一个解决方案，就是将

添加到DOM中。我找不到在函数组件中执行此操作的方法。我最终使用class component来实现这一点，它可以工作：

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;

从“React”导入React；
从“传单”中导入L，{传单mouseevent}；
导入“传单/目录/传单.css”；
从“传单/dist/images/marker icon.png”导入图标；
从“传单/dist/images/marker shadow.png”导入iconShadow；
设DefaultIcon=L.icon({
iconUrl：图标，
shadowUrl:iconShadow，
});
类映射扩展了React.Component{
componentDidMount（）{
这个.map（）；
}
地图（）{
L.Marker.prototype.options.icon=DefaultIcon；
var mapSW=新的L点（0960），
mapNE=新的L点（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，
最大缩放：5，
诺拉普：没错，
}).addTo（地图）；
var maxBounds=L.latLngBounds(
取消映射（mapSW，map.getMaxZoom（）），
取消映射（mapNE，map.getMaxZoom（））
);
map.setMaxBounds（maxBounds）；
var marker=L.marker（[0,0]{
真的，
}).addTo（地图）；
marker.bindPopup（“我们的英雄！”）.openPopup（）；
函数onMapClick（e:MouseEvent）{
让tileSize=新的L点（32,32）；
让pixelPoint=map.project（例如，latlng，map.getMaxZoom（））.floor（）；
让coords=pixelPoint.unscaleBy（tileSize.floor）（）
警报（“您在“+coords”处单击了地图）；
}
在地图上（“单击”，在地图上单击）；
}
render（）{
返回；
}
}
导出默认地图；

这是调用传单映射组件的地方：

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

const comp:React.FC=（）=>{
返回(
//代码

现在我需要使用钩子功能，所以我必须使用函数组件。我如何解决“Map container not found”错误或使用函数组件将Map元素添加到DOM？

从您包含的代码中可以看出，您使用的似乎不是

react传单

，而是本机传单代码

将类组件用作函数应该不会有问题。使用效果挂钩替换

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>;
    }

导出默认函数传单映射（）{
useffect（（）=>{
map（）；
}, []);
…其余代码与您的相同，仅删除渲染方法
返回；
}

因为您使用的是typescript，所以可能是因为错误的类型而导致错误

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

从您包含的代码中可以看出，您似乎不是在使用

react传单

，而是在使用本机传单代码

将类组件用作函数应该不会有问题。使用效果挂钩替换

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>;
    }

导出默认函数传单映射（）{
useffect（（）=>{
map（）；
}, []);
…其余代码与您的相同，仅删除渲染方法
返回；
}

因为您使用的是typescript，所以可能是因为错误的类型而导致错误

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

我也有同样的错误，有效的解决方案在这里

同样的问题也是如此

由以下原因引起的错误：

在调用L.map（'map'）之前，必须将div id=“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;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
从“传单”进口L；
输入“传单/目录/传单.css”；
函数App（）{
//与componentDidMount和componentDidUpdate类似：
useffect（（）=>{
让电流_lat=28.625789；
设电流_长=77.0547899；
让当前_缩放=16；
设中心纬度=当前纬度；
设中心长度=当前长度；
让中心缩放=当前缩放；
//在调用L.map（'map'）之前，必须将添加到dom中
设map=L.map（'map'{
中：[中长，中长]，
缩放：居中缩放
});
L.tileLayer（“https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”{
属性：“©；贡献者”
}).addTo（地图）；
});
返回(
);
}//应用程序
导出默认应用程序；