Question

我是React的新手。我尝试在React项目中使用npm模块overlaying-marker-spiderfier-leaflet。

我按照https://www.npmjs.com/package/overlapping-marker-spiderfier-leaflet上的说明进行操作，所以我先做npm install -S overlapping-marker-spiderfier-leaflet，然后再做我项目中的import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier-leaflet';。

然后我做var oms = new OverlappingMarkerSpiderfier(this.map);，但我得到了：

未处理的拒绝（TypeError）： WEBPACK_IMPORTED_MODULE_8_overlapping_marker_spiderfier_leaflet 。OverlappingMarkerSpiderfier不是构造函数

您知道我该如何解决此错误。您认为我宁愿使用缩小的js来使用此插件吗？怎么这样？

Answer 1

overlapping-marker-spiderfier-leaflet library不会以与ES6兼容的方式导出任何内容。但是它可以作为文件从库的dist文件夹直接导入：

import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;

示例

import React from "react";
import {
  withLeaflet,
  MapLayer
} from "react-leaflet";
import L from "leaflet";
import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;

class Spiderfy extends Component {

  componentDidMount(props) {
    const { map } = props.leaflet;
    const oms = new OverlappingMarkerSpiderfier(map);
    //...
  }

  //...
}

This demo演示了如何将overlapping-marker-spiderfier-leaflet集成到react-leaflet中。

使用React安装适用于传单的重叠标记Spiderfier

1 个答案: