为什么我的自定义 React-leaflet 标记没有显示在我的地图上？

Question

我正尝试在 React 中为我的传单组件制作一个自定义标记图标。我正在定义一个图标 class 并尝试使图标 URL 成为我使用的 PNG 的位置。我运行遇到的问题是图标 URL 仅适用于 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|abcdef&chf=a,s,ee00FFFF'.

我也试过在我的项目中使用PNG的目录，以及google提供的图标的URL，例如'https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Acable%3A'。然而，这些都不能正确显示图像。这是我使用的特定 PNG 的问题吗？我尝试用 L.Icon.Default.prototype.options.iconUrl 覆盖默认的 URL 图标，但它产生了相同的结果。下面还将是尝试使用当前无法使用的图标时图标的外观图像。

（编辑：包括我目录的图像以防有帮助）

 function OutageIndicator({ outage }) {
   const LeafIcon = L.Icon.extend({
      options: {
          iconSize:     [38, 95],
          shadowSize:   [50, 64],
          iconAnchor:   [22, 94],
          shadowAnchor: [4, 62],
          popupAnchor:  [-3, -76]
      }
    });

    L.Icon.Default.prototype.options.iconUrl = 'icons/marker.png';

    const streamingIcon = new LeafIcon({
      iconUrl:"icons/marker.png"
    });
    
  return !coords ? (
      "Loading"
    ) : (
      <Marker position={[coords.lat, coords.lng]} icon={streamingIcon}>
        <Popup className={outage.service_type}>
          {outage.service_type}: {outage.service_name}
        </Popup>
      </Marker>
    );
}

function OutageMap() {
//a bunch of other lines of code

  return (
    <>
      <button onClick={setReportIsOpenTrue}>Report Outage</button>
      <MapContainer center={[44, -85]} zoom={7} scrollWheelZoom={true}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />

        {allOutages.map((mock) => (
          <OutageIndicator outage={mock} />
        ))}
      </MapContainer>
    </>
  );
}

export default OutageMap;

Answer 1

由于您使用的是 React，因此可能在后台配置了一个 webpack 构建工具，其中包含一个文件或 url-loader。

在这种情况下，您必须导入或要求您的图标文件，以便 webpack 知道它必须将其包含在您的包中：

    const streamingIcon = new LeafIcon({
      iconUrl: require("./icons/marker.png")
    });

为什么我的自定义 React-leaflet 标记没有显示在我的地图上？

Why is my custom React-leaflet marker not displaying on my map?

javascript

node.js

leaflet

reactjs

react-leaflet