typescript - 如何在 React-leaflet 版本 3 中为同一位置添加多个图标

Question

我正在使用带有 TypeScript 的 React-leaflet 版本 3 开发应用程序。在我的应用程序中，我需要为一个位置添加多个图标。例如：一个特定的 [lat,long] 位置被确定为有一个献血营地，早上 8 点有一个户外检查中心，下午 3 点，同一位置将有一个临时音乐会和一个免费食品中心。所以，一次我需要为我的标记放置至少两个图标。例如：早上的献血营和户外检查的图标。在标记标签中，图标属性允许只有一个值。

所以，我尝试了这个选项。然而到目前为止还没有运气。

我用了L.divIcon

const mapNodeIcon = L.divIcon({
html: `<div class="multi-icon-div">
<img src="../icon/myIcons/bloodDonCamp.svg" width="30px"/>
<img src="../icon/myIcons/outdoorCheck.svg" width="30px"/>  
</div>`,
iconAnchor: [10, 10],
popupAnchor: [0, -19],
iconSize: [55, 55],
});

标记标签

<Marker 
        key={myMap.id} 
        position={[lat, lng]}
        icon={mapNodeIcon}
        >
        <Popup>
          <h3>This is the event location</h3>
        </Popup>
      </Marker>

我面临的这个问题是，尽管 iconDiv 在地图上作为标记可见，但 svg 图标图像并未加载到 div 中。如何处理这个问题？

可能是，这是一个简单的问题，但即使它可以通过这种方式解决，这是一个好方法吗？还有其他可能的有效方法吗？因为，我的地图将根据时间（早上和下午）呈现不同的 svg 图标，我怀疑这是否是多节点地图的更快方法。

非常感谢任何想法和帮助。

Answer 1

以您的方式导入 svg 是行不通的。下面你有正确的 svg 导入。

import React from 'react';
import {ReactComponent as Logo} from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <Logo />
    </div>
  );
}
export default App;

在此链接中，您可以找到添加 svg 的方法的完整列表

- 更新 -

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import tileLayer from '../util/tileLayer';
import L from 'leaflet';

import facebook from './facebook-square.svg';
import twitter from './twitter.svg';

const center = [52.22977, 21.01178];

const MapWrapper = () => {

  const mapNodeIcon = L.divIcon({
    html: `<div style="display: flex;">
      <img src="${facebook}" width="30px"/>
      <img src="${twitter}" width="30px"/>  
    </div>`,
    iconAnchor: [10, 10],
    popupAnchor: [0, -19],
    iconSize: [55, 55],
  });

  return (
    <MapContainer center={center} zoom={18} scrollWheelZoom={false}>
      <TileLayer {...tileLayer} />

      <Marker position={center} icon={mapNodeIcon}>
        <Popup>Center Warsaw</Popup>
      </Marker>

    </MapContainer>
  )
}

export default MapWrapper;