diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts index 93e6688f..66c13d4b 100644 --- a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts +++ b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts @@ -36,7 +36,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { this.setData(changes.pathList?.currentValue); this.setPathIndex(this.selectedIndex); } - if (changes?.MapList?.currentValue && this?.pathSimplifierIns) { + if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) { + console.log(this.MapList); this.pathList = [ { name: '路线1', @@ -45,7 +46,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { ]; this.setData(this.pathList); this.setPathIndex(this.selectedIndex); - console.log(this.MapList); } } ngOnInit(): void { @@ -78,6 +78,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { this.aMap.on('complete', () => { // this.service.msgSrv.info('地图加载完成 !'); this.pathInit(); + // this.setPOIS(); }); }) .catch(e => { @@ -125,6 +126,130 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { }); } + setPOIS() { + AMapUI.loadUI(['misc/MarkerList'], (MarkerList: any) => { + var markerList = new MarkerList({ + //关联的map对象 + map: this.aMap, + + //选中状态(通过点击列表或者marker)时在Marker和列表节点上添加的class,可以借此编写css控制选中时的展示效果 + selectedClassNames: 'selected', + + //返回数据项的Id + getDataId: (dataItem: any, index: any) => { + //index表示该数据项在数组中的索引位置,从0开始,如果确实没有id,可以返回index代替 + return dataItem.id; + }, + //返回数据项的位置信息,需要是AMap.LngLat实例,或者是经纬度数组,比如[116.789806, 39.904989] + getPosition: (dataItem: any) => { + console.log(dataItem); + + return dataItem.position; + }, + //返回数据项对应的Marker + getMarker: (dataItem: any, context: any, recycledMarker: any) => { + //marker的标注内容 + var content = dataItem.markerLabel; + + var label = { + offset: new AMap.Pixel(16, 18), //修改label相对于marker的位置 + content: content + }; + + //存在可回收利用的marker + if (recycledMarker) { + //直接更新内容返回 + recycledMarker.setLabel(label); + return recycledMarker; + } + + //返回一个新的Marker + return new AMap.Marker({ + label: label + }); + }, + //返回数据项对应的infoWindow + getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => { + var tpl = '
<%- dataItem.id %>:<%- dataItem.infoWinContent %>
'; + + //MarkerList.utils.template支持underscore语法的模板 + var content = MarkerList.utils.template(tpl, { + dataItem: dataItem, + dataIndex: context.index + }); + + if (recycledInfoWindow) { + //存在可回收利用的infoWindow, 直接更新内容返回 + recycledInfoWindow.setContent(content); + return recycledInfoWindow; + } + + //返回一个新的InfoWindow + return new AMap.InfoWindow({ + offset: new AMap.Pixel(0, -32), + content: content + }); + }, + //返回数据项对应的列表节点 + getListElement: (dataItem: any, context: any, recycledListElement: any) => { + var tpl = '
<%- dataItem.id %>:<%- dataItem.listDesc %>
'; + + var content = MarkerList.utils.template(tpl, { + dataItem: dataItem, + dataIndex: context.index + }); + + if (recycledListElement) { + //存在可回收利用的listElement, 直接更新内容返回 + recycledListElement.innerHTML = content; + return recycledListElement; + } + + //返回一段html,MarkerList将利用此html构建一个新的dom节点 + return '