map.addLayer（markerClusters）不是一个函数

Posted 2021-04-13

我收到此错误：

map.addLayer（markerClusters）不是一个函数

因为我更新了以下包，所以我的markerClusters：

"leaflet": "^0.7.7",
"leaflet.markercluster": "^0.5.0",
"react-leaflet": "^0.12.3",
"react-leaflet-cluster-layer": "0.0.3",
"react-leaflet-control": "^1.1.0",

至

"leaflet": "^0.7.7",
"leaflet.markercluster": "^1.0.3",
"react-leaflet": "^1.1.6",
"react-leaflet-control": "^1.4.0",
"react-leaflet-cluster-layer": "0.0.3",

我需要更新我的页面上的另一个地图，所以我不想使用旧版本。有谁知道如何解决这个问题。

我刚刚发现，在SO上，地图不是全局变量，但正如其定义的那样，它是可用的。谷歌搜索还没有带来任何东西，这是有用的。

提前致谢！

这是我的MarkerClusters.js文件：

import { Component, PropTypes } from 'react';
import Leaflet from 'leaflet';
import 'leaflet.markercluster';
import styles from './MarkerCluster.scss';
import markerDefaultIcon from '../../../assets/images/marker_default.png';

export default class MarkerCluster extends Component {

    static propTypes = {
        map: PropTypes.object.isRequired,
        features: PropTypes.array
    }

    componentDidMount() {
        this.createMarkerClusters(this.props);      
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.features !== this.props.features) {
            this.createMarkerClusters(nextProps);
        }
    }

    createMarkerClusters = (props = this.props) => {
        const { map, features } = props; 
        if (!features || !features.length) {
            return null;
        }
        const markerClusters = Leaflet.markerClusterGroup({
            disableClusteringAtZoom: 14,
            maxClusterRadius: 110,
            polygonOptions: {
                color: '#fff'
            },
            iconCreateFunction(cluster) {
                const count = cluster.getChildCount();
                let clusterSizeClassName = styles.small_cluster;
                if (count > 80) {
                    clusterSizeClassName = styles.large_cluster;
                } else if (count > 15) {
                    clusterSizeClassName = styles.mid_cluster;
                }
                return Leaflet.divIcon({ 
                    iconSize: [45, 45],
                    className: `${styles.marker_cluster} ${clusterSizeClassName}`,
                    html: `<b class="${styles.cluster_inner}"> ${count} </b>`
                });
            }
        });   
        const icon = Leaflet.divIcon({
            className: '',
            iconSize : [48, 64],
            iconAnchor: [9, 63],
            html: `<img class="${styles.marker}" src='${markerDefaultIcon}'/>`
        });
        features.forEach(feature => {
            const { geometry, properties } = feature;
            const title = properties.name;
            const { coordinates: [lng, lat] } = geometry;
            const marker = Leaflet.marker(new Leaflet.LatLng(lat, lng), { title, icon });
            marker.bindPopup(this.getPopupTemplate(properties));
            markerClusters.addLayer(marker);
        });
        map.addLayer(markerClusters);
        window.setTimeout(() => {            
            if (this.markerClusters) {
                map.removeLayer(this.markerClusters); 
            }
            this.markerClusters = markerClusters; 
        }, 300);
    }

    getPopupTemplate = props => {
        const createImageHolder = image => {
            if (!image) {
                return '';
            }
            return (
                `<div class="${styles.image}">
                    <img src="${props.image.medium}" />
                </div>`
            );
        }
        return (
            `<div class="${styles.popup}">
                <a 
                    class="${styles.link}"
                    href="/d/${props.id}"
                >
                    <div class="${styles.title}">${props.name}</div>
                    ${createImageHolder(props.image)}
                    Buy
                </a>
            </div>`
        )
    }

    render() {
        return null;
    }

}

堆栈跟踪：

未捕获（在承诺中）TypeError：map.addLayer不是MarkerCluster.comp中的MarkerCluster.ComponentWillReceiveProps（MarkerCluster.js：20）处的MarkerCluster._this.createMarkerClusters（MarkerCluster.js：20）中的函数：611 atactLifeCyclePerf（ReactCompositeComponent.js） ：75）ReactCompositeComponentWrapper.updateComponent（ReactCompositeComponent.js：610），位于ReactDOMComponent的Object.updateChildren（ReactReconciler.js：109）的Object.receiveComponent（ReactReconciler.js：125）处的ReactCompositeComponentWrapper.receiveComponent（ReactCompositeComponent.js：610）。 _reconcilerUpdateChildren（ReactMultiChild.js：208）在ReactDOMComponent._updateChildren（ReactMultiChild.js：312）

答案

所以我们发现了错误：

我们在Map中调用了MarkerCluster对象：

                    <MarkerCluster
                        map={ this.refs.map }
                        features={ features } />

因此this.refs.map是react-leaflet Map Object，它没有addLayer（）函数;此函数仅在原始的leafletElement中。

所以我们用

map.leafletElement.addLayer();

代替

map.addLayer();