| | |
|---|
| | | if (!point.lon || !point.lat) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | let iconUrl = MARK_ICON_RED |
|---|
| | | if (point.operationStatus === 1 && point.verificationStatus === 3) { |
|---|
| | | iconUrl = MARK_ICON_GREEN |
|---|
| | | } |
|---|
| | | const icon = new AMap.Icon({ |
|---|
| | | size: new AMap.Size(46, 46), |
|---|
| | | image: getPointIconUrl(point.status), |
|---|
| | | imageSize: new AMap.Size(46, 46), |
|---|
| | | size: new AMap.Size(26, 36), |
|---|
| | | image: iconUrl, |
|---|
| | | imageSize: new AMap.Size(26, 36), |
|---|
| | | }) |
|---|
| | | const marker = new AMap.Marker({ |
|---|
| | | position: [point.lon, point.lat], |
|---|
| | | icon, |
|---|
| | | title: point.name, |
|---|
| | | map: showPoints ? map : null, |
|---|
| | | // title: point.name, // 移除 title 属性，改用 label |
|---|
| | | map, |
|---|
| | | extData: point, |
|---|
| | | offset: new AMap.Pixel(-23, -23), |
|---|
| | | offset: new AMap.Pixel(-13, -36), |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 添加鼠标移入事件 |
|---|
| | | marker.on('mouseover', () => { |
|---|
| | | marker.setLabel({ |
|---|
| | | offset: new AMap.Pixel(0, -5), // 设置文本标注偏移量 |
|---|
| | | content: `<div class="map-info"><div class="map-info-name">${point.name}</div><img class="map-info-icon" src="/src/assets/geofence/down.png" alt="图标"></div>`, // 设置文本标注内容 |
|---|
| | | direction: 'top', // 设置文本标注方位 |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 添加鼠标移出事件 |
|---|
| | | marker.on('mouseout', () => { |
|---|
| | | marker.setLabel({ |
|---|
| | | content: '', // 清空内容 |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | newMarkers.push(marker) |
|---|
| | | }) |
|---|
| | | |
|---|
| | |
|---|
| | | height: 100vh; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .amap-marker-label { |
|---|
| | | border: none !important; |
|---|
| | | background-color: transparent !important; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
