0

我收到此错误：

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;
    }

}

堆栈跟踪：

Uncaught (in promise) TypeError: map.addLayer is not a function at MarkerCluster._this.createMarkerClusters (MarkerCluster.js:64) at MarkerCluster.componentWillReceiveProps (MarkerCluster.js:20) at ReactCompositeComponent.js:611 at measureLifeCyclePerf (ReactCompositeComponent.js :75) 在 ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:610) 在 ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:547) 在 Object.receiveComponent (ReactReconciler.js:125) 在 Object.updateChildren (ReactChildReconciler.js:109) 在 ReactDOMComponent。 _reconcilerUpdateChildren (ReactMultiChild.js:208) 在 ReactDOMComponent._updateChildren (ReactMultiChild.js:312)

4

1 回答 1

1

所以我们发现了错误：

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

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

所以 this.refs.map 是 react-leaflet 映射对象，它没有函数 addLayer(); 此功能仅在原始的leafletElement 中。

所以我们使用

map.leafletElement.addLayer();

代替

map.addLayer();
于 2017-05-16T14:41:48.947 回答