edit

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 = '<p><%- dataItem.id %>：<%- dataItem.infoWinContent %><p>';
+
+          //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 = '<p><%- dataItem.id %>：<%- dataItem.listDesc %><p>';
+
+          var content = MarkerList.utils.template(tpl, {
+            dataItem: dataItem,
+            dataIndex: context.index
+          });
+
+          if (recycledListElement) {
+            //存在可回收利用的listElement, 直接更新内容返回
+            recycledListElement.innerHTML = content;
+            return recycledListElement;
+          }
+
+          //返回一段html，MarkerList将利用此html构建一个新的dom节点
+          return '<li>' + content + '</li>';
+        }
+      });
+
+      //监听选中改变
+      markerList.on('selectedChanged', (event: any, info: any) => {
+        console.log(event, info);
+      });
+
+      //监听Marker和ListElement上的点击
+      markerList.on('markerClick listElementClick', (event: any, record: any) => {
+        //console.log(event, record);
+      });
+
+      //构建一个数据项数组，数据项本身没有格式要求，但需要支持getDataId和getPosition
+      var data = [
+        {
+          id: 'A',
+          position: [116.020764, 39.904989],
+          markerLabel: 'X_A',
+          infoWinContent: 'Hello! A',
+          listDesc: '店铺 A'
+        },
+        {
+          id: 'B',
+          position: [116.405285, 39.904989],
+          markerLabel: 'X_B',
+          infoWinContent: 'Hello! B',
+          listDesc: '店铺 B'
+        },
+        {
+          id: 'C',
+          position: [116.789806, 39.904989],
+          markerLabel: 'X_C',
+          infoWinContent: 'Hello! C',
+          listDesc: '店铺 C'
+        }
+      ];
+
+      //展示该数据
+      markerList.render(data);
+    });
+  }
+
   setData(pathList: Array<any>) {
     this.pathSimplifierIns.setData(pathList);
   }