我正在尝试绘制圆圈，并在地图上添加弹出窗口，但我一直遇到错误。无法读取未定义的属性（Reading＆＃x27; lng＆＃x27;）

Question

1. 此代码来自我的app.js

2. 我将其用作地图的默认位置，一旦应用程序打开

   const [mapcenter，setmapcenter] = usestate（{lat：34.80746，lng：-40.4796}）;

3. 我将其用作 。从“下拉菜单”中选择的地图位置，我从端点获取的数据中获取LAT和LNG

   setMapCenter（[[data.countryinfo.lat，data.countryinfo.lng]））;

4. 我将以下道具传递给地图

    
      Zoom = {MapZoom}
      国家 /地区= {mapcountries}
      casestype = {casestype}
      /＆gt;````
    

5. 这是我的utils.js文件，根据其案例类型的颜色

    `````import {circle，popup}来自“ react-leflet”；
   
      const casestypecolors = {
      案例：{
        十六进制：“＃cc1034”，
        RGB：“ RGB（204，16，52）”，
       Half_op：“ RGBA（204、16、52、0.5）”，
       乘数：800，
        }，，
   
      恢复：{
       十六进制：“＃7DD71D”，
       RGB：“ RGB（125，215，29）”，
       half_op：“ RGBA（125，215，29，0.5）”，
        乘数：1200，
      }，，
        死亡人数： {
       十六进制：“＃fb4443”，
       RGB：“ RGB（251，68，67）”，
        Half_op：“ RGBA（251，68，67，0.5）”，
       乘数：2000，
       }，，
       };````
    

6. 这是我的utilis.js。我试图在地图上绘制圆圈和弹出窗口。控制台错误（Untured TypeError：无法读取未定义的属性（读取'lng'）

    `````extort const showdataonmap =（data，casestype =“ case”）=＆gt; （（
       data.map（（（country）=＆gt;（（ 
       ＆lt; circle＆gt;
       中心= {[country.countryinfo.lat，country.countryinfo.long]}} 
   
         fillopacity = {0.4}，
        color = {casestypecolors [casestype] .hex}，
        fillcolor = {casestypecolors [casestype] .hex}， 
   
       半径= {
        Math.sqrt（country [Casestype]） * casestypecolors [Casestype] .multiplier
      } 
       ＆lt; popup＆gt;
        ＆lt; h6＆gt;是弹出式工作＆lt;/h6＆gt;
     ＆lt;/popup＆gt;
     ＆lt;/circle＆gt;
       ））
       ）;``````
    

7. 这是从我的map.js. console错误（und typeerror：无法读取未定义的属性（读取'lng'）

   >

    ``````import {showdataonmap} from'./utils';
   
           函数映射（{中心，Zoom，contife，Casestype}）{
                返回 （
              ＆lt; div className ='map'＆gt;
      ＆lt; felleTmap Center = {center} Zoom = {Zoom} scrollWheelZoom = {false}＆gt;
         ＆lt; tilelayer
         属性='＆amp; copy; ＆lt; a 
         href =“ https://www.openstreetmap.org/copyright”＆gt; openstreetmap＆lt;/a＆gt;贡献者的
            url =“ https：// {s} .tile.openstreetmap.org/{z}/{x}/{y} .png”
           /＆gt;
            {showdataonmap（国家 /地区，casestype）} 
      ＆lt;/fefletmap＆gt;
                 ＆lt;/div＆gt;
            ）
             }
   
             导出默认地图``
    

Answer 1

问题在您的showdataonmap函数中，您呈现circle：

<Circle >
    center = {[country.countryInfo.lat, country.countryInfo.long]} 
    fillOpacity = {0.4},
    color={casesTypeColors[casesType].hex},
    fillColor={casesTypeColors[casesType].hex}, 
    radius={
     Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
    } 
  <Popup>
    <h6>Is the POPUP working</h6>
  </Popup>
</Circle>

circle的所有属性（中心，fillopacity fillopacity ，color等）已定义，您已经使用＆gt;关闭了圆圈元素。这应该更改为：

<Circle
      center={[country.countryInfo.lat, country.countryInfo.long]}
      fillOpacity={0.4}
      color={casesTypeColors[casesType].hex}
      fillColor={casesTypeColors[casesType].hex}
      radius={
        Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
      }
    >

有一个工作demo 在这里 >使圆圈呈现。