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

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

我正在使用 React-leaflet 版本 3 和 TypeScript 开发一个应用程序。在我的应用程序中，我需要为一个位置添加多个图标。例如：一个特定的 [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 图标，我怀疑这是否是多节点地图的更快方法。

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

解决方法

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

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

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

在此 link 处，您有一个完整的添加 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;