Question

我的标记未显示 React leaflet

2022-05-13

559

javascript reactjs react-leaflet

目标是在地图上显示标记。

我不明白为什么我的标记没有显示

我使用 react-leaflet

响应没问题但没有显示任何内容

响应

我的地图

导入

import { MapContainer, TileLayer, Marker, ScaleControl } from 'react-leaflet';
import tileLayer from '../util/tileLayer';
import L from "leaflet";
import 'leaflet-fullscreen/dist/Leaflet.fullscreen.js';
import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import { useEffect } from 'react';
import newMarker from "../data/asset/pin.png";
import axios from 'axios'

第一个视图的中心

const center = [46.227638, 2.213749];

图标

const pointerIcon = new L.Icon({
  iconUrl: newMarker,
  iconSize: [50, 58], // size of the icon
  iconAnchor: [20, 58], // changed marker icon position
});

标记

const MyMarkers = ({ data }) => {
  return data.map(({ lat, lng }, index) => (
    <Marker
      key={index}
      position={{ lat, lng }}
      icon={pointerIcon}
    >
    </Marker>
  ));
}

使用 useEffect、async await 获取数据 & axios

const MapWrapper = () => {

  useEffect( async () => {

    markers = (await componentDataMarkers()).data
    console.log(markers);
  }, [])
  const componentDataMarkers = async () => await axios.get(`http://localhost:5000/plane/latlong`)
  var markers = []

React Leaflet 组件

  return (
    <MapContainer
    fullscreenControl={true}
    center={center}
    zoom={13}
    scrollWheelZoom={true}
    >

      <TileLayer {...tileLayer} />

      <MyMarkers data={markers} />
      <ScaleControl imperial={false} />
    </MapContainer>
  )
}

export default MapWrapper;

Answer 1

Marker 位置的类型为 [lat, lng] 而非 {lat, lng> 。示例 -

<Marker position={[51.505, -0.09]} />

更新：您的 data 对象是 arrays 的 array 。 map 函数似乎不正确。它需要像 markers.map((marker, index) =>

您可以在实时编辑器中尝试的工作示例 -

const center = [51.505, -0.09]
const markers = [[51.505, -0.10], [51.505, -0.09], [51.505, -0.08]];
const MyMarkers = ({ data }) => {
    return data.map((marker, index) => {
     return (
     <Marker key={index} position={marker}>
      <Popup>
        Marker <br /> Popup.
      </Popup>
    </Marker>
     ); 
     });
}
render(
  <MapContainer center={center} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
   <MyMarkers data={markers} />
  </MapContainer>,
)

Answer 2

return data.map(({ lat, lng }, index) => (
    <Marker
      key={index}
      position={[ lat, lng ]} // array here
      icon={pointerIcon}
    >
    </Marker>
  ));

这里，为什么要从键为 0 和 1 的数组中提取纬度和经度？ 您不能从数组中提取 { lat, lng } ，只能从具有 lat 和 lng 键的对象中提取。

您能否 console.log lat 和 lng 并查看此处是否有数据或未定义数据？