如何把已弃用的 DeprecatedMapMarkerClusterer 迁移到 MapMarkerClusterer【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components如果你的angular/google-maps项目正在用deprecated-map-marker-clusterer标签做地图标记聚合那么这个组件已经被官方标记为弃用它基于旧的 MarkerClustererPlus 库googlemaps/markerclustererplus源码注释中通过breaking-change 21.0.0标注了它将在 21.0.0 版本移除。这篇文章基于仓库中的 README 与 CHANGELOG给出从DeprecatedMapMarkerClusterer迁移到新MapMarkerClusterer组件基于googlemaps/markerclusterer的完整路径替换外部脚本、修改模板与导入、处理输入项差异以及迁移后的验证方式。背景迁移前后各是什么CHANGELOG.md在 19.0.02024-11-19的 google-maps 破坏性变更中记录了这次重构的来龙去脉旧的MapMarkerClusterer类被重命名为DeprecatedMapMarkerClusterermap-marker-clusterer选择器被改成deprecated-map-marker-clusterer同一版本引入了基于新库的新MapMarkerClusterer组件官方说明是The new googlemaps/markerclusterer API should be imported instead of the old one。两个组件的关键差异分别来自 deprecated 组件 README、新组件 README 和 CHANGELOG.md对比项DeprecatedMapMarkerClustererMapMarkerClusterer模板标签deprecated-map-marker-clusterermap-marker-clusterer底层库googlemaps/markerclustererplus的MarkerClusterer类googlemaps/markerclusterer的MarkerClusterer类需要单独加载的脚本https://unpkg.com/googlemaps/markerclustererplus/dist/index.min.jshttps://unpkg.com/googlemaps/markerclusterer/dist/index.min.js可配置输入ariaLabelFn、averageCenter、batchSize、gridSize、imagePath、imageSizes、maxZoom、minimumClusterSize、styles、title、zIndex、zoomOnClick、options等renderer、algorithmREADME 示例中的标记子元素map-markermap-advanced-marker两个组件的输出output是一致的clusteringbegin、clusteringend、clusterClick、markerClustererInitialized因此现有的事件订阅代码不需要改动。前置条件按照 google-maps 组件 README 的要求迁移前应确保项目已安装angular/google-maps安装命令为ng add angular/google-mapsindex.html中按文档要求引入了 Google Maps 的 Dynamic Library Import 脚本并配置了 API KeyMarkerClusterer 库与 Google Maps JavaScript API 一样需要单独加载——它不包含在 Maps API 脚本里两个 README 都强调了这一点。第一步替换 MarkerClusterer 外部脚本在index.html或你加载旧库的位置中把旧的 MarkerClustererPlus 脚本换成新库脚本!-- 旧基于 markerclustererplus -- script srchttps://unpkg.com/googlemaps/markerclustererplus/dist/index.min.js/script !-- 新基于 markerclusterer -- script srchttps://unpkg.com/googlemaps/markerclusterer/dist/index.min.js/script如果漏掉这一步新组件在开发模式下初始化时会抛出文档中明确的错误见验证迁移是否生效一节的第 1 条这可以直接用来确认脚本是否加载正确。第二步替换模板标签与组件导入deprecated 组件 README 中的旧用法示例!-- 旧模板 -- google-map height400px width750px [center]center [zoom]zoom (mapClick)addMarker($event) deprecated-map-marker-clusterer [imagePath]markerClustererImagePath for (position of markerPositions; track position) { map-marker [position]position / } /deprecated-map-marker-clusterer /google-map对应的新组件 README 示例!-- 新模板 -- google-map height400px width750px [center]center [zoom]zoom (mapClick)addMarker($event) map-marker-clusterer for (markerPosition of markerPositions; track $index) { map-advanced-marker [position]markerPosition/ } /map-marker-clusterer /google-map组件类中的导入与imports数组同步替换新 README 示例// google-map-demo.component.ts import {Component} from angular/core; import {GoogleMap, MapMarkerClusterer, MapAdvancedMarker} from angular/google-maps; Component({ selector: google-map-demo, templateUrl: google-map-demo.html, imports: [GoogleMap, MapMarkerClusterer, MapAdvancedMarker], }) export class GoogleMapDemo { center: google.maps.LatLngLiteral {lat: 24, lng: 12}; zoom 4; markerPositions: google.maps.LatLngLiteral[] []; addMarker(event: google.maps.MapMouseEvent) { this.markerPositions.push(event.latLng.toJSON()); } }注意两个 README 示例中标记子元素的差异旧示例使用map-marker新示例使用map-advanced-marker迁移时按新示例调整。第三步处理输入项input差异这是迁移中最容易出编译错误的一步两边的可配置输入完全不同新组件没有旧组件的imagePath、gridSize、imageSizes、zoomOnClick、options等输入也不再提供fitMapToMarkers方法以及getGridSize()等一组 getter/setter 方法这些只存在于 deprecated 组件源码 中。模板里对这些输入的绑定要删除或按新 API 重新实现。新组件暴露两个输入见 新组件源码renderer用于自定义聚合图标的渲染方式algorithm用于指定聚合算法两者均引用googlemaps/markerclusterer库文档中的Renderer/Algorithm接口。新组件 README 与旧 README 一样说明MapMarkerClusterer没有options输入MarkerClusterer类的各项输入应直接设置。源码注释表明renderer或algorithm在初始化之后发生变化时组件会重建recreate内部的 cluster而不是就地更新——如果你动态切换这两项预期行为是重建。事件侧无差异clusteringbegin、clusteringend、clusterClick、markerClustererInitialized在两个组件上同名同义订阅代码可原样保留。验证迁移是否生效仓库文档给出了以下可用于核对的具体判据脚本缺失时的开发模式报错。新组件在 map-marker-clusterer.ts 中会检查全局库是否存在若不存在则抛出MarkerClusterer class not found, cannot construct a marker cluster. Please install the MarkerClusterer library: https://github.com/googlemaps/js-markerclusterer迁移后如果还能看到这条错误说明新脚本没有加载成功反过来看不到这条错误说明库已正确加载。markerClustererInitialized输出事件。底层MarkerClusterer对象创建完成后会发出该事件new构造成功后立即emit。订阅它可以在运行期确认聚合器已初始化。初始化前的访问保护。开发模式下在聚合器完成初始化前尝试访问会抛出Cannot interact with a MarkerClusterer before it has been initialized...如果你的代码在markerClustererInitialized之前就调用聚合器相关逻辑会出现这条错误。功能层面新组件同样通过ContentChildren监听子标记的变化标记增删后会自动调用addMarkers/removeMarkers并重绘新组件对应方法为render()。README 示例中通过点击地图添加标记mapClick事件即可观察聚合是否正常工作。限制与注意事项弃用组件的移除计划在21.0.0源码中的breaking-change 21.0.0标注在此之前两者可以共存如果你当前版本低于 19.0.0则新组件尚不存在需要先升级angular/google-maps才能按本文迁移。旧组件中通过imagePath等输入定制的聚合图标外观在新组件上没有同名输入需改走renderer输入按googlemaps/markerclusterer库的Renderer接口自行实现文档未提供逐参数的对照映射。两个组件的完整输入输出清单可分别对照 goldens/google-maps/index.api.md 中的DeprecatedMapMarkerClusterer与MapMarkerClustererAPI 摘录核对。主要参考文档deprecated 组件 README、新组件 README、google-maps 组件 README、CHANGELOG.md。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何把已弃用的 DeprecatedMapMarkerClusterer 迁移到 MapMarkerClusterer？
如何把已弃用的 DeprecatedMapMarkerClusterer 迁移到 MapMarkerClusterer【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components如果你的angular/google-maps项目正在用deprecated-map-marker-clusterer标签做地图标记聚合那么这个组件已经被官方标记为弃用它基于旧的 MarkerClustererPlus 库googlemaps/markerclustererplus源码注释中通过breaking-change 21.0.0标注了它将在 21.0.0 版本移除。这篇文章基于仓库中的 README 与 CHANGELOG给出从DeprecatedMapMarkerClusterer迁移到新MapMarkerClusterer组件基于googlemaps/markerclusterer的完整路径替换外部脚本、修改模板与导入、处理输入项差异以及迁移后的验证方式。背景迁移前后各是什么CHANGELOG.md在 19.0.02024-11-19的 google-maps 破坏性变更中记录了这次重构的来龙去脉旧的MapMarkerClusterer类被重命名为DeprecatedMapMarkerClusterermap-marker-clusterer选择器被改成deprecated-map-marker-clusterer同一版本引入了基于新库的新MapMarkerClusterer组件官方说明是The new googlemaps/markerclusterer API should be imported instead of the old one。两个组件的关键差异分别来自 deprecated 组件 README、新组件 README 和 CHANGELOG.md对比项DeprecatedMapMarkerClustererMapMarkerClusterer模板标签deprecated-map-marker-clusterermap-marker-clusterer底层库googlemaps/markerclustererplus的MarkerClusterer类googlemaps/markerclusterer的MarkerClusterer类需要单独加载的脚本https://unpkg.com/googlemaps/markerclustererplus/dist/index.min.jshttps://unpkg.com/googlemaps/markerclusterer/dist/index.min.js可配置输入ariaLabelFn、averageCenter、batchSize、gridSize、imagePath、imageSizes、maxZoom、minimumClusterSize、styles、title、zIndex、zoomOnClick、options等renderer、algorithmREADME 示例中的标记子元素map-markermap-advanced-marker两个组件的输出output是一致的clusteringbegin、clusteringend、clusterClick、markerClustererInitialized因此现有的事件订阅代码不需要改动。前置条件按照 google-maps 组件 README 的要求迁移前应确保项目已安装angular/google-maps安装命令为ng add angular/google-mapsindex.html中按文档要求引入了 Google Maps 的 Dynamic Library Import 脚本并配置了 API KeyMarkerClusterer 库与 Google Maps JavaScript API 一样需要单独加载——它不包含在 Maps API 脚本里两个 README 都强调了这一点。第一步替换 MarkerClusterer 外部脚本在index.html或你加载旧库的位置中把旧的 MarkerClustererPlus 脚本换成新库脚本!-- 旧基于 markerclustererplus -- script srchttps://unpkg.com/googlemaps/markerclustererplus/dist/index.min.js/script !-- 新基于 markerclusterer -- script srchttps://unpkg.com/googlemaps/markerclusterer/dist/index.min.js/script如果漏掉这一步新组件在开发模式下初始化时会抛出文档中明确的错误见验证迁移是否生效一节的第 1 条这可以直接用来确认脚本是否加载正确。第二步替换模板标签与组件导入deprecated 组件 README 中的旧用法示例!-- 旧模板 -- google-map height400px width750px [center]center [zoom]zoom (mapClick)addMarker($event) deprecated-map-marker-clusterer [imagePath]markerClustererImagePath for (position of markerPositions; track position) { map-marker [position]position / } /deprecated-map-marker-clusterer /google-map对应的新组件 README 示例!-- 新模板 -- google-map height400px width750px [center]center [zoom]zoom (mapClick)addMarker($event) map-marker-clusterer for (markerPosition of markerPositions; track $index) { map-advanced-marker [position]markerPosition/ } /map-marker-clusterer /google-map组件类中的导入与imports数组同步替换新 README 示例// google-map-demo.component.ts import {Component} from angular/core; import {GoogleMap, MapMarkerClusterer, MapAdvancedMarker} from angular/google-maps; Component({ selector: google-map-demo, templateUrl: google-map-demo.html, imports: [GoogleMap, MapMarkerClusterer, MapAdvancedMarker], }) export class GoogleMapDemo { center: google.maps.LatLngLiteral {lat: 24, lng: 12}; zoom 4; markerPositions: google.maps.LatLngLiteral[] []; addMarker(event: google.maps.MapMouseEvent) { this.markerPositions.push(event.latLng.toJSON()); } }注意两个 README 示例中标记子元素的差异旧示例使用map-marker新示例使用map-advanced-marker迁移时按新示例调整。第三步处理输入项input差异这是迁移中最容易出编译错误的一步两边的可配置输入完全不同新组件没有旧组件的imagePath、gridSize、imageSizes、zoomOnClick、options等输入也不再提供fitMapToMarkers方法以及getGridSize()等一组 getter/setter 方法这些只存在于 deprecated 组件源码 中。模板里对这些输入的绑定要删除或按新 API 重新实现。新组件暴露两个输入见 新组件源码renderer用于自定义聚合图标的渲染方式algorithm用于指定聚合算法两者均引用googlemaps/markerclusterer库文档中的Renderer/Algorithm接口。新组件 README 与旧 README 一样说明MapMarkerClusterer没有options输入MarkerClusterer类的各项输入应直接设置。源码注释表明renderer或algorithm在初始化之后发生变化时组件会重建recreate内部的 cluster而不是就地更新——如果你动态切换这两项预期行为是重建。事件侧无差异clusteringbegin、clusteringend、clusterClick、markerClustererInitialized在两个组件上同名同义订阅代码可原样保留。验证迁移是否生效仓库文档给出了以下可用于核对的具体判据脚本缺失时的开发模式报错。新组件在 map-marker-clusterer.ts 中会检查全局库是否存在若不存在则抛出MarkerClusterer class not found, cannot construct a marker cluster. Please install the MarkerClusterer library: https://github.com/googlemaps/js-markerclusterer迁移后如果还能看到这条错误说明新脚本没有加载成功反过来看不到这条错误说明库已正确加载。markerClustererInitialized输出事件。底层MarkerClusterer对象创建完成后会发出该事件new构造成功后立即emit。订阅它可以在运行期确认聚合器已初始化。初始化前的访问保护。开发模式下在聚合器完成初始化前尝试访问会抛出Cannot interact with a MarkerClusterer before it has been initialized...如果你的代码在markerClustererInitialized之前就调用聚合器相关逻辑会出现这条错误。功能层面新组件同样通过ContentChildren监听子标记的变化标记增删后会自动调用addMarkers/removeMarkers并重绘新组件对应方法为render()。README 示例中通过点击地图添加标记mapClick事件即可观察聚合是否正常工作。限制与注意事项弃用组件的移除计划在21.0.0源码中的breaking-change 21.0.0标注在此之前两者可以共存如果你当前版本低于 19.0.0则新组件尚不存在需要先升级angular/google-maps才能按本文迁移。旧组件中通过imagePath等输入定制的聚合图标外观在新组件上没有同名输入需改走renderer输入按googlemaps/markerclusterer库的Renderer接口自行实现文档未提供逐参数的对照映射。两个组件的完整输入输出清单可分别对照 goldens/google-maps/index.api.md 中的DeprecatedMapMarkerClusterer与MapMarkerClustererAPI 摘录核对。主要参考文档deprecated 组件 README、新组件 README、google-maps 组件 README、CHANGELOG.md。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考