尧图网站建设 
Angular Google Maps 多边形组件 MapPolygon 实战指南从路径绘制到交互事件与可编辑多边形【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/componentsMapPolygon是 Angular Material 组件库angular/google-maps中用于在 Google 地图上绘制任意多边形区域的官方组件它是对 Google Maps JavaScript API 中google.maps.Polygon为基础结合仓库内的 组件实现、单元测试 与 官方演示代码系统讲解 MapPolygon 的安装、路径绑定、样式选项、事件监听、实例方法调用以及可编辑多边形等完整实战能力读完即可在自己的 Angular 应用中落地使用。一、MapPolygon 是什么MapPolygon是angular/google-maps提供的 Angular 指令directive选择器为map-polygon其核心职责是以声明式 Angular 模板的方式创建并管理一个google.maps.Polygon实例无需手动编写new google.maps.Polygon(...)和polygon.setMap(map)等命令式代码通过paths/options输入属性驱动多边形的顶点路径与样式通过一系列polygonXxx输出事件暴露底层的 Polygon 交互事件提供getPath()、getPaths()、getVisible()等快捷实例方法让组件模板与底层原生对象无缝衔接。从源码看MapPolygon是一个Directive类实现了OnInit与OnDestroy生命周期并声明了exportAs: mapPolygon意味着你可以在模板中通过模板引用变量如#polygonmapPolygon直接访问组件实例见 map-polygon.ts。该指令同时被注册进 GoogleMapsModule 与 公共 API 导出并支持 standalone 方式直接导入使用。二、环境准备安装与加载 Google Maps API使用MapPolygon前需要先完成angular/google-maps的整体接入完整步骤见 google-maps 包说明安装在 Angular 项目中执行ng add angular/google-maps获取 API Key按照 Google Maps Platform 官方流程申请 API Key加载 API在应用的index.html中引入 Google Maps JavaScript API 的 Dynamic Library Import 脚本并将key替换为你自己的 API Key。该库在首次渲染 Google Map 时会利用动态导入机制按需加载所需脚本避免一次性加载全部 Maps 代码!-- index.html -- !DOCTYPE html body ... script (g{var h,a,k,pThe Google Maps JavaScript API,cgoogle,limportLibrary,q__ib__,mdocument,bwindow;bb[c]||(b[c]{});var db.maps||(b.maps{}),rnew Set,enew URLSearchParams,u()h||(hnew Promise(async(f,n){await (am.createElement(script));e.set(libraries,[...r]);for(k in g)e.set(k.replace(/[A-Z]/g,t_t[0].toLowerCase()),g[k]);e.set(callback,c.maps.q);a.srchttps://maps.${c}apis.com/maps/api/js?e;d[q]f;a.onerror()hn(Error(p could not load.));a.noncem.querySelector(script[nonce])?.nonce||;m.head.append(a)}));d[l]?console.warn(p only loads once. Ignoring:,g):d[l](f,...n)r.add(f)u().then(()dl)})({ v: weekly, key: YOUR_API_KEY_GOES_HERE }); /script /body /html三、快速上手绘制第一个多边形原文档给出了一个最简三角形多边形示例以下在保留其完整骨架的基础上补齐组件导入与说明使其可以直接运行。组件类google-maps-demo.component.tsimport {Component} from angular/core; import {GoogleMap, MapPolygon} from angular/google-maps; Component({ selector: google-map-demo, templateUrl: google-map-demo.html, imports: [GoogleMap, MapPolygon], // standalone 方式直接导入两个指令 }) export class GoogleMapDemo { center: google.maps.LatLngLiteral {lat: 24, lng: 12}; zoom 4; vertices: google.maps.LatLngLiteral[] [ {lat: 13, lng: 13}, {lat: -13, lng: 0}, {lat: 13, lng: -13}, ]; }模板google-maps-demo.component.htmlgoogle-map height400px width750px [center]center [zoom]zoom map-polygon [paths]vertices / /google-mapmap-polygon必须作为google-map的子元素出现底层实现中MapPolygon会通过inject(GoogleMap)注入宿主GoogleMap指令见 map-polygon.ts并在初始化时把 Polygon 挂载到该地图实例上。[paths]vertices中的三个经纬度点构成多边形的封闭路径组件会自动将首尾相连形成闭合区域。四、核心输入paths 与 options 的用法与优先级4.1paths多边形顶点路径paths是MapPolygon最关键的输入用于定义多边形的顶点。源码中它的类型定义为见 map-polygon.tspaths: | google.maps.MVCArraygoogle.maps.MVCArraygoogle.maps.LatLng // 多个环路带洞多边形 | google.maps.MVCArraygoogle.maps.LatLng | google.maps.LatLng[] | google.maps.LatLngLiteral[]也就是说paths既可以是简单的LatLngLiteral[]如上例的三个顶点也可以是多个环路组成的数组用于绘制带洞的复杂多边形。paths采用 setter 输入每次赋值都会把新值推入内部的BehaviorSubject并通过_watchForPathChanges订阅调用polygon.setPaths(paths)增量更新无需重建整个多边形见 map-polygon.ts。4.2options完整的 PolygonOptions 配置除了paths组件还提供options输入接受完整的google.maps.PolygonOptions对象用于配置描边、填充、可交互性等全部原生选项。仓库演示代码google-map-demo.ts中给出的典型配置polygonOptions: google.maps.PolygonOptions { paths: POLYGON_PATH, // {lat: 20, lng: 21} / {lat: 22, lng: 23} / {lat: 24, lng: 25} strokeColor: grey, // 描边颜色 strokeOpacity: 0.8, // 描边不透明度 0~1 };常用的PolygonOptions字段还包括strokeWeight描边宽度像素、fillColor填充颜色、fillOpacity填充不透明度、editable是否可编辑、draggable是否可拖拽、clickable是否可点击、zIndex、visible是否可见等。4.3 两者的合并规则与优先级这是理解组件行为的关键paths与options并非互斥而是通过_combineOptions()合并后传给 Polygon 构造函数见 map-polygon.tsprivate _combineOptions(): Observablegoogle.maps.PolygonOptions { return combineLatest([this._options, this._paths]).pipe( map(([options, paths]) { const combinedOptions: google.maps.PolygonOptions { ...options, paths: paths || options.paths, }; return combinedOptions; }), ); }合并规则为paths输入优先于options.paths。测试用例 map-polygon.spec.ts 明确验证了这一点——当同时传入options内含paths和独立的paths输入时最终传给构造函数的选项是{...options, paths}即独立paths覆盖了options中的路径。因此推荐路径数据放在paths输入上响应式更新更直接视觉样式放在options中。五、交互事件完整的输出事件清单MapPolygon通过MapEventManager暴露了 11 个底层 Polygon 事件对应的输出全部以 RxJSObservable形式提供定义见 map-polygon.ts输出事件事件类型触发时机polygonClickPolyMouseEvent点击多边形区域polygonDblclickPolyMouseEvent双击多边形区域polygonDragMapMouseEvent拖拽多边形过程中持续触发polygonDragendMapMouseEvent拖拽结束polygonDragstartMapMouseEvent拖拽开始polygonMousedownPolyMouseEvent在多边形上按下鼠标polygonMousemovePolyMouseEvent在多边形上移动鼠标polygonMouseoutPolyMouseEvent鼠标移出多边形polygonMouseoverPolyMouseEvent鼠标移入多边形polygonMouseupPolyMouseEvent在多边形上松开鼠标polygonRightclickPolyMouseEvent右键点击多边形polygonInitializedEventEmittergoogle.maps.PolygonPolygon 实例初始化完成后触发回传底层原生对象模板中的用法测试用例 map-polygon.spec.ts 展示了完整的绑定写法google-map map-polygon [options]options [paths]paths (polygonClick)handleClick() (polygonRightclick)handleRightclick() /map-polygon /google-map事件懒加载机制这些事件通过MapEventManager.getLazyEmitter()见 map-event-manager.ts实现懒绑定只有在 Angular 侧有订阅者时才会真正调用原生polygon.addListener(name, callback)注册监听在 Polygon 实例尚未初始化前订阅的事件会被缓存待实例创建后自动补绑。测试用例验证了这一点——模板中绑定了click与rightclick时spy 只会记录这两个事件的监听而在初始化后动态订阅polygonDragend也能成功补上监听见 map-polygon.spec.ts。同时事件回调会通过_ngZone.run()重新进入 Angular Zone从而正常触发变更检测。六、访问底层实例实例方法与 polygon 属性MapPolygon暴露了只读属性polygon?: google.maps.Polygon即底层原生对象见 map-polygon.ts。在polygonInitialized事件或ViewChild中拿到组件实例后可以访问它也可以调用以下快捷方法均对应原生 Polygon 的同名方法见 map-polygon.ts方法返回类型说明getDraggable()boolean多边形当前是否可拖拽getEditable()boolean多边形当前是否可编辑顶点可拖动getPath()MVCArrayLatLng获取第一个环路的顶点序列getPaths()MVCArrayMVCArrayLatLng获取全部环路含洞的顶点序列getVisible()boolean多边形当前是否可见这些方法在内部都先调用_assertInitialized()进行守卫如果 Polygon 尚未初始化就调用会抛出错误提示请等待 Polygon 加载完成后再与之交互见 map-polygon.ts。对应行为均有测试覆盖见 map-polygon.spec.ts。在组件中通过ViewChild获取实例并读取路径的典型写法ViewChild(MapPolygon) polygon!: MapPolygon; readPaths() { const paths this.polygon.getPaths(); // 或 this.polygon.polygon.getPaths() }七、进阶实战可编辑多边形与动态更新仓库演示应用google-map-demo.ts提供了一个非常实用的可编辑多边形模式用户勾选Editable Polygon后把editable选项写入polygonOptions同时把当前多边形的最新顶点路径回填到 options 中保证编辑拖拽顶点后样式与数据保持一致editablePolygonChanged(editable: boolean) { this.polygonOptions { ...this.polygonOptions, editable, paths: this.polygon.getPaths(), // 编辑完成后取回最新路径 }; }对应的模板google-map-demo.htmldiv label forpolygon-checkbox Toggle Polygon input typecheckbox [(ngModel)]isPolygonDisplayed /label /div div label foreditable-polygon-checkbox Toggle Editable Polygon input typecheckbox [disabled]!isPolygonDisplayed [ngModel]polygonOptions.editable (ngModelChange)editablePolygonChanged($event) /label /div由于组件内部对options与paths的变化做了响应式订阅_watchForOptionsChanges调用polygon.setOptions、_watchForPathChanges调用polygon.setPaths因此运行时更新polygonOptions或paths数组会即时反映到地图上非常适合做区域选择、范围编辑等交互场景。八、初始化与销毁的底层机制理解初始化流程有助于排查多边形不显示的问题。ngOnInit中的逻辑见 map-polygon.ts分两条路径若google.maps.Polygon已可用且宿主地图已就绪直接构造 Polygon 并挂载否则API 尚未加载完成在 Angular Zone 外并行等待this._map._resolveMap()与google.maps.importLibrary(maps)完成后再初始化——这正是前文 Dynamic Library Import 脚本发挥作用的地方。真正的实例创建发生在_initialize中见 map-polygon.ts整体在_ngZone.runOutsideAngular中执行以避免原生事件触发无谓的变更检测依次完成new polygonConstructor(options)、polygon.setMap(map)、设置事件管理器目标、触发polygonInitialized最后开启选项与路径的变更监听。销毁时ngOnDestroy会清理事件监听并调用polygon.setMap(null)将多边形从地图上移除见 map-polygon.ts。九、延伸阅读MapPolygon是angular/google-maps覆盖层overlay组件家族的一员同类组件还有 MapPolyline折线、MapRectangle矩形、MapCircle圆形、MapGroundOverlay地面覆盖层等它们遵循完全一致的options/专用输入 事件输出 实例方法设计范式完整清单见 google-maps 包说明。需要进一步了解组件与原生 Polygon 的对应关系时可直接查阅 组件源码 与 测试用例。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Angular Google Maps 多边形组件 MapPolygon 实战指南：从路径绘制到交互事件与可编辑多边形
Angular Google Maps 多边形组件 MapPolygon 实战指南从路径绘制到交互事件与可编辑多边形【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/componentsMapPolygon是 Angular Material 组件库angular/google-maps中用于在 Google 地图上绘制任意多边形区域的官方组件它是对 Google Maps JavaScript API 中google.maps.Polygon为基础结合仓库内的 组件实现、单元测试 与 官方演示代码系统讲解 MapPolygon 的安装、路径绑定、样式选项、事件监听、实例方法调用以及可编辑多边形等完整实战能力读完即可在自己的 Angular 应用中落地使用。一、MapPolygon 是什么MapPolygon是angular/google-maps提供的 Angular 指令directive选择器为map-polygon其核心职责是以声明式 Angular 模板的方式创建并管理一个google.maps.Polygon实例无需手动编写new google.maps.Polygon(...)和polygon.setMap(map)等命令式代码通过paths/options输入属性驱动多边形的顶点路径与样式通过一系列polygonXxx输出事件暴露底层的 Polygon 交互事件提供getPath()、getPaths()、getVisible()等快捷实例方法让组件模板与底层原生对象无缝衔接。从源码看MapPolygon是一个Directive类实现了OnInit与OnDestroy生命周期并声明了exportAs: mapPolygon意味着你可以在模板中通过模板引用变量如#polygonmapPolygon直接访问组件实例见 map-polygon.ts。该指令同时被注册进 GoogleMapsModule 与 公共 API 导出并支持 standalone 方式直接导入使用。二、环境准备安装与加载 Google Maps API使用MapPolygon前需要先完成angular/google-maps的整体接入完整步骤见 google-maps 包说明安装在 Angular 项目中执行ng add angular/google-maps获取 API Key按照 Google Maps Platform 官方流程申请 API Key加载 API在应用的index.html中引入 Google Maps JavaScript API 的 Dynamic Library Import 脚本并将key替换为你自己的 API Key。该库在首次渲染 Google Map 时会利用动态导入机制按需加载所需脚本避免一次性加载全部 Maps 代码!-- index.html -- !DOCTYPE html body ... script (g{var h,a,k,pThe Google Maps JavaScript API,cgoogle,limportLibrary,q__ib__,mdocument,bwindow;bb[c]||(b[c]{});var db.maps||(b.maps{}),rnew Set,enew URLSearchParams,u()h||(hnew Promise(async(f,n){await (am.createElement(script));e.set(libraries,[...r]);for(k in g)e.set(k.replace(/[A-Z]/g,t_t[0].toLowerCase()),g[k]);e.set(callback,c.maps.q);a.srchttps://maps.${c}apis.com/maps/api/js?e;d[q]f;a.onerror()hn(Error(p could not load.));a.noncem.querySelector(script[nonce])?.nonce||;m.head.append(a)}));d[l]?console.warn(p only loads once. Ignoring:,g):d[l](f,...n)r.add(f)u().then(()dl)})({ v: weekly, key: YOUR_API_KEY_GOES_HERE }); /script /body /html三、快速上手绘制第一个多边形原文档给出了一个最简三角形多边形示例以下在保留其完整骨架的基础上补齐组件导入与说明使其可以直接运行。组件类google-maps-demo.component.tsimport {Component} from angular/core; import {GoogleMap, MapPolygon} from angular/google-maps; Component({ selector: google-map-demo, templateUrl: google-map-demo.html, imports: [GoogleMap, MapPolygon], // standalone 方式直接导入两个指令 }) export class GoogleMapDemo { center: google.maps.LatLngLiteral {lat: 24, lng: 12}; zoom 4; vertices: google.maps.LatLngLiteral[] [ {lat: 13, lng: 13}, {lat: -13, lng: 0}, {lat: 13, lng: -13}, ]; }模板google-maps-demo.component.htmlgoogle-map height400px width750px [center]center [zoom]zoom map-polygon [paths]vertices / /google-mapmap-polygon必须作为google-map的子元素出现底层实现中MapPolygon会通过inject(GoogleMap)注入宿主GoogleMap指令见 map-polygon.ts并在初始化时把 Polygon 挂载到该地图实例上。[paths]vertices中的三个经纬度点构成多边形的封闭路径组件会自动将首尾相连形成闭合区域。四、核心输入paths 与 options 的用法与优先级4.1paths多边形顶点路径paths是MapPolygon最关键的输入用于定义多边形的顶点。源码中它的类型定义为见 map-polygon.tspaths: | google.maps.MVCArraygoogle.maps.MVCArraygoogle.maps.LatLng // 多个环路带洞多边形 | google.maps.MVCArraygoogle.maps.LatLng | google.maps.LatLng[] | google.maps.LatLngLiteral[]也就是说paths既可以是简单的LatLngLiteral[]如上例的三个顶点也可以是多个环路组成的数组用于绘制带洞的复杂多边形。paths采用 setter 输入每次赋值都会把新值推入内部的BehaviorSubject并通过_watchForPathChanges订阅调用polygon.setPaths(paths)增量更新无需重建整个多边形见 map-polygon.ts。4.2options完整的 PolygonOptions 配置除了paths组件还提供options输入接受完整的google.maps.PolygonOptions对象用于配置描边、填充、可交互性等全部原生选项。仓库演示代码google-map-demo.ts中给出的典型配置polygonOptions: google.maps.PolygonOptions { paths: POLYGON_PATH, // {lat: 20, lng: 21} / {lat: 22, lng: 23} / {lat: 24, lng: 25} strokeColor: grey, // 描边颜色 strokeOpacity: 0.8, // 描边不透明度 0~1 };常用的PolygonOptions字段还包括strokeWeight描边宽度像素、fillColor填充颜色、fillOpacity填充不透明度、editable是否可编辑、draggable是否可拖拽、clickable是否可点击、zIndex、visible是否可见等。4.3 两者的合并规则与优先级这是理解组件行为的关键paths与options并非互斥而是通过_combineOptions()合并后传给 Polygon 构造函数见 map-polygon.tsprivate _combineOptions(): Observablegoogle.maps.PolygonOptions { return combineLatest([this._options, this._paths]).pipe( map(([options, paths]) { const combinedOptions: google.maps.PolygonOptions { ...options, paths: paths || options.paths, }; return combinedOptions; }), ); }合并规则为paths输入优先于options.paths。测试用例 map-polygon.spec.ts 明确验证了这一点——当同时传入options内含paths和独立的paths输入时最终传给构造函数的选项是{...options, paths}即独立paths覆盖了options中的路径。因此推荐路径数据放在paths输入上响应式更新更直接视觉样式放在options中。五、交互事件完整的输出事件清单MapPolygon通过MapEventManager暴露了 11 个底层 Polygon 事件对应的输出全部以 RxJSObservable形式提供定义见 map-polygon.ts输出事件事件类型触发时机polygonClickPolyMouseEvent点击多边形区域polygonDblclickPolyMouseEvent双击多边形区域polygonDragMapMouseEvent拖拽多边形过程中持续触发polygonDragendMapMouseEvent拖拽结束polygonDragstartMapMouseEvent拖拽开始polygonMousedownPolyMouseEvent在多边形上按下鼠标polygonMousemovePolyMouseEvent在多边形上移动鼠标polygonMouseoutPolyMouseEvent鼠标移出多边形polygonMouseoverPolyMouseEvent鼠标移入多边形polygonMouseupPolyMouseEvent在多边形上松开鼠标polygonRightclickPolyMouseEvent右键点击多边形polygonInitializedEventEmittergoogle.maps.PolygonPolygon 实例初始化完成后触发回传底层原生对象模板中的用法测试用例 map-polygon.spec.ts 展示了完整的绑定写法google-map map-polygon [options]options [paths]paths (polygonClick)handleClick() (polygonRightclick)handleRightclick() /map-polygon /google-map事件懒加载机制这些事件通过MapEventManager.getLazyEmitter()见 map-event-manager.ts实现懒绑定只有在 Angular 侧有订阅者时才会真正调用原生polygon.addListener(name, callback)注册监听在 Polygon 实例尚未初始化前订阅的事件会被缓存待实例创建后自动补绑。测试用例验证了这一点——模板中绑定了click与rightclick时spy 只会记录这两个事件的监听而在初始化后动态订阅polygonDragend也能成功补上监听见 map-polygon.spec.ts。同时事件回调会通过_ngZone.run()重新进入 Angular Zone从而正常触发变更检测。六、访问底层实例实例方法与 polygon 属性MapPolygon暴露了只读属性polygon?: google.maps.Polygon即底层原生对象见 map-polygon.ts。在polygonInitialized事件或ViewChild中拿到组件实例后可以访问它也可以调用以下快捷方法均对应原生 Polygon 的同名方法见 map-polygon.ts方法返回类型说明getDraggable()boolean多边形当前是否可拖拽getEditable()boolean多边形当前是否可编辑顶点可拖动getPath()MVCArrayLatLng获取第一个环路的顶点序列getPaths()MVCArrayMVCArrayLatLng获取全部环路含洞的顶点序列getVisible()boolean多边形当前是否可见这些方法在内部都先调用_assertInitialized()进行守卫如果 Polygon 尚未初始化就调用会抛出错误提示请等待 Polygon 加载完成后再与之交互见 map-polygon.ts。对应行为均有测试覆盖见 map-polygon.spec.ts。在组件中通过ViewChild获取实例并读取路径的典型写法ViewChild(MapPolygon) polygon!: MapPolygon; readPaths() { const paths this.polygon.getPaths(); // 或 this.polygon.polygon.getPaths() }七、进阶实战可编辑多边形与动态更新仓库演示应用google-map-demo.ts提供了一个非常实用的可编辑多边形模式用户勾选Editable Polygon后把editable选项写入polygonOptions同时把当前多边形的最新顶点路径回填到 options 中保证编辑拖拽顶点后样式与数据保持一致editablePolygonChanged(editable: boolean) { this.polygonOptions { ...this.polygonOptions, editable, paths: this.polygon.getPaths(), // 编辑完成后取回最新路径 }; }对应的模板google-map-demo.htmldiv label forpolygon-checkbox Toggle Polygon input typecheckbox [(ngModel)]isPolygonDisplayed /label /div div label foreditable-polygon-checkbox Toggle Editable Polygon input typecheckbox [disabled]!isPolygonDisplayed [ngModel]polygonOptions.editable (ngModelChange)editablePolygonChanged($event) /label /div由于组件内部对options与paths的变化做了响应式订阅_watchForOptionsChanges调用polygon.setOptions、_watchForPathChanges调用polygon.setPaths因此运行时更新polygonOptions或paths数组会即时反映到地图上非常适合做区域选择、范围编辑等交互场景。八、初始化与销毁的底层机制理解初始化流程有助于排查多边形不显示的问题。ngOnInit中的逻辑见 map-polygon.ts分两条路径若google.maps.Polygon已可用且宿主地图已就绪直接构造 Polygon 并挂载否则API 尚未加载完成在 Angular Zone 外并行等待this._map._resolveMap()与google.maps.importLibrary(maps)完成后再初始化——这正是前文 Dynamic Library Import 脚本发挥作用的地方。真正的实例创建发生在_initialize中见 map-polygon.ts整体在_ngZone.runOutsideAngular中执行以避免原生事件触发无谓的变更检测依次完成new polygonConstructor(options)、polygon.setMap(map)、设置事件管理器目标、触发polygonInitialized最后开启选项与路径的变更监听。销毁时ngOnDestroy会清理事件监听并调用polygon.setMap(null)将多边形从地图上移除见 map-polygon.ts。九、延伸阅读MapPolygon是angular/google-maps覆盖层overlay组件家族的一员同类组件还有 MapPolyline折线、MapRectangle矩形、MapCircle圆形、MapGroundOverlay地面覆盖层等它们遵循完全一致的options/专用输入 事件输出 实例方法设计范式完整清单见 google-maps 包说明。需要进一步了解组件与原生 Polygon 的对应关系时可直接查阅 组件源码 与 测试用例。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考