為什么我的自定義 React-leaflet 標記沒有顯示在我的地圖上？

Question

我正在嘗試為我的傳單組件制作自定義標記圖標。 我正在定義一個圖標類並嘗試使 iconURL 成為我使用的 PNG 的位置。 我遇到的問題是 iconURL 僅適用於“https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|abcdef&chf=a,s,ee00FFFF”。

我還嘗試在我的項目中使用 PNG 的目錄，以及谷歌提供的圖標的 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")
    });