首页 > 解决方案 > Leaflet Markercluster TypeError:无法读取未定义的属性(读取'lat')

问题描述

我正在尝试使用传单(V 1.7.1)和 Markercluster 插件(V 1.5.1)构建一个简单的地图。这些库是从 node_modules 加载的。

import * as L from 'leaflet';
import "leaflet.markercluster/dist/leaflet.markercluster";

export default class LeafletMapControl {

  private readonly settings: any;
  private readonly map: L.Map;

  // MarkerClusterGroup
  private markerClusterGroup: L.MarkerClusterGroup;

  public constructor(settings: any) {
    this.settings = settings;

    // Create map
    this.map = L.map('eventsdiv', {
      doubleClickZoom: false,
    });
    this.map.setView([51, 9], 6);

    // Create tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      maxZoom: 18
    }).addTo(this.map);

    // Initialize MarkerClusterGroup
    this.markerClusterGroup = L.markerClusterGroup({
      showCoverageOnHover: false,
      maxClusterRadius: 60,
    });

    const marker1: L.Marker = L.marker([49.3426023, 12.1303503]);
    const marker2: L.Marker = L.marker([54.3093069, 13.0380009]);
    this.markerClusterGroup.addLayer(marker1);
    this.markerClusterGroup.addLayer(marker2);
    this.markerClusterGroup.addTo(this.map);
  }
}

但不幸的是,我收到以下错误消息:

Uncaught TypeError: Cannot read properties of undefined (reading 'lat')
    at LatLngBounds.intersects (leaflet-src.js:1277)
    at i._recursively (leaflet.markercluster.js?v=1:1)
    at i._recursivelyAddChildrenToMap (leaflet.markercluster.js?v=1:1)
    at i.<anonymous> (leaflet.markercluster.js?v=1:1)
    at i.addLayers (leaflet.markercluster.js?v=1:1)
    at i.onAdd (leaflet.markercluster.js?v=1:1)
    at i._layerAdd (Layer.js:114)
    at NewClass.whenReady (leaflet-src.js:4428)
    at NewClass.addLayer (leaflet-src.js:6629)
    at i.addTo (Layer.js:52)

如果我使用与纯 JavaScript 和下载的库(没有 npm)完全相同的代码,它可以工作。所以它可能是传单库的一个错误。有没有人想让这段代码运行?

标签: typescriptleafletleaflet.markercluster

解决方案


推荐阅读