【问题标题】:ERROR TypeError: layer.addEventParent is not a function while setting markers for marker cluster in angularERROR TypeError: layer.addEventParent is not a function while setting marker for marker cluster in angular
【发布时间】:2019-11-26 06:04:55
【问题描述】:

我在角度使用 ngx-leaflet-markercluster 来显示共享相同位置的标记簇。在设置标记时,它会给出错误 addeventparent is not a function 。

//ts

const data: Marker[] = res.map(loc => {
      if (loc.STATUS === this.appConstantsService.OUTAGE_STATUS.INACTIVE) {
        return { lat: loc.location_details_lat, lon: loc.location_details_lon, icon: '/assets/icons/marker-0.png' };

      } else {
        return { lat: loc.location_details_lat, lon: loc.location_details_lon, icon: 'assets/icons/marker-1.png' };
      }
});
this.markerClusterData = data;

//html

<div leaflet style="height: 600px;" 
[leafletOptions]="options"
[leafletBaseLayers]="baseLayers"

[leafletMarkerCluster]="markerClusterData"
[leafletMarkerClusterOptions]="markerClusterOptions"
(leafletMarkerClusterReady)="markerClusterReady($event)"
>
</div>

我希望标记在具有相同纬度和经度时出现在群集中,当我单击群集时,它应该放大并显示标记。首先我正在使用 agm 地图。当两个标记共享相同时我遇到了问题lat 和 long 。我使用了 agm-marker-cluster 和 agm-maker-spider 但没有解决方案。有没有其他方法可以解决它

【问题讨论】:

  • 您使用的是哪些版本(传单/markercluster)?那里可能存在冲突,请参阅stackoverflow.com/questions/40028929/…
  • @rebecca "@types/leaflet": "^1.4.6", "@types/leaflet.markercluster": "^1.4.0"
  • 如果我错了,请纠正我,但是您不应该使用标记类来实例化标记:marker([long, lat], configObject)?
  • 另外,据我了解,您需要使用 addLayer() 添加标记吗?见:stackoverflow.com/questions/49333263/leaflet-markerclustergroup
  • @rebecca 是的,您的正确标记类必须用于添加标记。我想为每个标记显示自定义信息窗口。每个标记都有不同的数据。可以完成

标签: angular leaflet leaflet.markercluster


【解决方案1】:

我们必须使用标记类来添加标记

const data: Marker[] = res.map(loc => {
    if (loc.STATUS === this.appConstantsService.OUTAGE_STATUS.INACTIVE) {
        const icon = L.icon({ iconUrl: '/assets/icons/marker-0.png' });
        return marker([loc.location_details_lat, loc.location_details_lon], { icon });
    } else {
        const icon = L.icon({ iconUrl: '/assets/icons/marker-1.png' });

        return marker([loc.location_details_lat, loc.location_details_lon], { icon })
    }
});

【讨论】:

    猜你喜欢
    • 2018-05-17
    • 1970-01-01
    • 2018-05-09
    • 1970-01-01
    • 2020-03-25
    • 1970-01-01
    • 1970-01-01
    • 2018-12-08
    • 1970-01-01
    相关资源
    最近更新 更多