点击点位展示详情信息

src/index.less

@@ -225,3 +225,38 @@ body {
     left: 50%;
     transform: translate(-50% -50%);
   }
+
+// marker popup
+.popup-title {
+  width: 100%;
+  font-size: 14px;
+  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+  font-weight: bold;
+  color: #2F66F2;
+  margin-bottom: 18px;
+}
+.popup-title-border{
+  display: inline-block;
+  width: 5px;
+  height: 16px;
+  background: #2F66F2;
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  margin-right: 8px;
+}
+.popup-name {
+  width: 100%;
+  font-size: 14px;
+  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+  font-weight: bold;
+  color: #3D3D3D;
+  margin-bottom: 8px;
+}
+.popup-address, .popup-memo {
+  width: 100%;
+  font-size: 14px;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #3D3D3D;
+  margin-bottom: 8px;
+}

src/pages/BaseMap/index.js

@@ -7,7 +7,7 @@ import Guide from '../../components/Guide/index.ts';
 import icon2 from '../../assets/icon/position_icon2.png';
 import Header from '../../components/Header/index.js';
 
-import { GaodeMap ,Scene, PointLayer, Heatmap, PolygonLayer, Marker, MarkerLayer } from '@antv/l7';
+import { GaodeMap ,Scene, PointLayer, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup } from '@antv/l7';
 
 import styles from './index.less';
 
@@ -147,25 +147,43 @@ class BaseMap extends React.Component{
         // map.addImage( 'blueIcon',logoImage,);
         map.addImage('yellowIcon', icon2,);
         map.addImage( 'greenIcon','https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',);
-        const pointLayer = new PointLayer({name: layerId})
-            .source(LabelsData, {
-                parser: {
-                    type: 'json',
-                    x: 'lng',
-                    y: 'lat',
-                }
-            })
-            .shape('yellowIcon')
-            .size(20)
-            // .color('mag', mag => {
-            //     return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
-            // })
-            .active(true)
-            .style({
-                opacity: 1,
-                strokeWidth: 3
-            });
-        map.addLayer(pointLayer);
+        // const pointLayer = new PointLayer({name: layerId})
+        //     .source(LabelsData, {
+        //         parser: {
+        //             type: 'json',
+        //             x: 'lng',
+        //             y: 'lat',
+        //         }
+        //     })
+        //     .shape('yellowIcon')
+        //     .size(20)
+        //     .active(true)
+        //     .style({
+        //         opacity: 1,
+        //         strokeWidth: 3
+        //     });
+        // map.addLayer(pointLayer);
+        let markerLayer = new MarkerLayer({name: layerId});
+        let el, popup, marker;
+        for (let i = 0; i < LabelsData.length; i++) {
+            el = document.createElement('label');
+            el.className = 'labelclass';
+            popup = new Popup({
+                offsets: [0, 30]
+            }).setHTML(`<div>
+                <div class="popup-title"><span class="popup-title-border"></span>详情信息</div>
+                <div class="popup-name">名称：${LabelsData[i].pointName}</div>
+                <div class="popup-address">地址：${LabelsData[i].address || ''}</div>
+                <div class="popup-memo">备注：${LabelsData[i].memo || ''}</div>
+            </div>`);
+            marker = new Marker({
+                el
+            }).setLnglat({lng: LabelsData[i].lng, lat: LabelsData[i].lat})
+            .setPopup(popup);
+
+            markerLayer.addMarker(marker);
+          }
+        this.state.map.addMarkerLayer(markerLayer);
     }
 
     // 点击点显示详细信息