Question

当我在本地运行Format-*时，我的Leaflet映射中的自定义图标运行良好，但是当我尝试构建时，出现了与我的自定义标记图标有关的错误：

gatsby develop

相关进口：

 WebpackError: TypeError: leaflet_src_layer_marker__WEBPACK_IMPORTED_MODULE_4__.Icon is not a constructor

创建自定义图标：

import { Map, Marker, Popup, TileLayer, Tooltip, ZoomControl } from 'react-leaflet'
import { Icon } from 'leaflet/src/layer/marker'

JSX：

// Init custom map icon
  const mapIcon = MapIcon();
  const markerIcon = new Icon({
    iconUrl: mapIcon,
    iconSize: [36, 36],
    iconAnchor: [18, 18],
    shadowSize: [36, 36],
    shadowUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png',
    shadowAnchor: [10, 18],
    popupAnchor: [0, -16],
    tooltipAnchor: [13, -4]
  });

我已经尝试了此处列出的所有解决方案：https://github.com/Leaflet/Leaflet.markercluster/issues/874。我也看过几个类似的问题。似乎没有任何帮助。例如，我还尝试导入像{ markerData.length > 0 ? markerData.map((node, index) => ( <Marker position={[node.coords.lat, node.coords.lng]} key={`marker-${index}`} icon={markerIcon}> <Popup className="leaflet-popup" onOpen={(el) => openPopup(el)}> <h5 className="popup-location-title">{node.location_title}</h5> <h6 className="popup-address">{node.address}</h6> <div className="popup-description" dangerouslySetInnerHTML={{ __html: node.description }}></div> {!!node.embed ? <div className="popup-embed"> <Embed url={node.embed} className="popup-media-embed" /> </div> : null} </Popup> <Tooltip className="leaflet-tooltip"> <span className="title">{node.location_title}</span> <span className="address">{node.address}</span> </Tooltip> </Marker> )) : null }和import * as L from "leaflet"这样的传单。然后创建像import L from "leaflet"，const markerIcon = L.Icon({，const markerIcon = L.icon({和const markerIcon = new L.Icon({这样的新图标。我可以const markerIcon = new L.icon({，但是这些都不起作用。

我希望获得一些帮助。

Answer 1

将其构建。我必须将图标构造包装在对窗口obj的检查中：

// Init custom map icon
  if (typeof window !== 'undefined') {
    const mapIcon = MapIcon();
    markerIcon = new Icon({
      iconUrl: mapIcon,
      iconSize: [36, 36],
      iconAnchor: [18, 18],
      shadowSize: [36, 36],
      shadowUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png',
      shadowAnchor: [10, 18],
      popupAnchor: [0, -16],
      tooltipAnchor: [13, -4]
    });
  }

再次将图标传递到标记时：

<Marker position={[node.coords.lat, node.coords.lng]} key={`marker-${index}`} icon={(!!markerIcon) ? markerIcon : null}>

单张自定义图标，react-leaflet，无法构建Gatsby项目

1 个答案: