显示带有经纬度、长标记的数据数组：react-leaflet

Question

我有一个简单的 React 应用程序，它使用 Leaflet 和 OpenStreetMap 在地图上显示自行车站。

我已获取所有纬度和经度，但是当我映射数组并创建 组件，它们没有出现在地图上。

相反，我在浏览器控制台上收到此警告：

会变内存消耗太高。预算限制是文档表面积乘以 3（432150 像素）。超出预算的 will-change 的发生将被忽略。

我看到一些类似的问题和答案。这是因为CSS中出现了will-change，但我正在使用Leaflet库本身，所以我不知道在哪里解决这个问题。我也在 YouTube 上看过一些类似的视频，即使我们的逻辑几乎相同，他们也没有任何问题。

MapComponent.jsx

import React, { useState } from 'react';
import '../styles/MapComponent.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import { useEffect } from 'react';
import { fetchUserData, fetchNetworks } from '../redux/action/';
import { useDispatch, useSelector } from 'react-redux'
 
const MapComponent = () => {

    const dispatch = useDispatch()

    const [latitude, setLatitude] = useState(0)
    const [longitude, setLongitude] = useState(0)
    const [checkCords, setCheckCords] = useState(false)

    const countryCode = useSelector((state) => state.userData.country_code)
    const bikeNetworks = useSelector((state) => state.bikeNetworks.networks)

    const bikes = bikeNetworks.filter((network) => network.location.country == countryCode)

    useEffect(() => {
      if(navigator.geolocation) {
          navigator.geolocation.watchPosition((position) => {
              setLatitude(position.coords.latitude)
              setLongitude(position.coords.longitude)
              setCheckCords(true)
          })
      }
    }, [])

    useEffect(() => {
      dispatch(fetchUserData())
      dispatch(fetchNetworks())
    }, [])

  return (
      !checkCords ? <h1>Loading...</h1> :
    <MapContainer center={[latitude, longitude]} zoom={11}>
      <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={[latitude, longitude]}>
        <Popup>
          A pretty CSS3 popup.<br /> Easily customizable.
        </Popup>
      </Marker>
      {
        bikes.map((bike) => {
          <Marker 
          key={bike.id}
          position={[bike.location.latitude, bike.location.longitude]}>
            <Popup>
              A pretty CSS3 popup.<br /> Easily customizable.
            </Popup>
          </Marker>
        })
      }
    </MapContainer>
  
  )
}

export default MapComponent

Answer 1

您可能只是错过了 map 回调中的 return 语句，或者将其转换为不带大括号的短单表达式箭头函数形式：

        bikes.map((bike) => {
          // Do not forget to `return` something
          return (<Marker 
          key={bike.id}
          position={[bike.location.latitude, bike.location.longitude]}>
            <Popup>
              A pretty CSS3 popup.<br /> Easily customizable.
            </Popup>
          </Marker>);
        })

        // Or a short arrow function that automatically returns the result of a single expression: 
        bikes.map((bike) => ( // No curly braces after the arrow
          <Marker 
          key={bike.id}
          position={[bike.location.latitude, bike.location.longitude]}>
            <Popup>
              A pretty CSS3 popup.<br /> Easily customizable.
            </Popup>
          </Marker>
        ))

请参阅 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions 了解有关 JavaScript 中箭头函数语法的更多详细信息。

至于您的浏览器警告，它很可能与您当前的问题无关。