Commit a79afdf71dcdc86838d022c927b525f00f7ff525
1 parent
6d1debd2
perf: device location add point label
Showing
1 changed file
with
14 additions
and
2 deletions
| ... | ... | @@ -96,7 +96,7 @@ |
| 96 | 96 | deviceProfile: { default: boolean; enabled: boolean; name: string; transportType: string }; |
| 97 | 97 | deviceInfo: { longitude: string; latitude: string; address: string }; |
| 98 | 98 | } |
| 99 | - type MarkerList = DeviceInfo & { marker: any }; | |
| 99 | + type MarkerList = DeviceInfo & { marker: any; label: any }; | |
| 100 | 100 | |
| 101 | 101 | export default defineComponent({ |
| 102 | 102 | name: 'BaiduMap', |
| ... | ... | @@ -154,6 +154,7 @@ |
| 154 | 154 | const markerList: MarkerList[] = []; |
| 155 | 155 | data.forEach((item) => { |
| 156 | 156 | const { |
| 157 | + name, | |
| 157 | 158 | deviceState, |
| 158 | 159 | deviceInfo: { longitude, latitude }, |
| 159 | 160 | } = item; |
| ... | ... | @@ -161,11 +162,22 @@ |
| 161 | 162 | const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx; |
| 162 | 163 | const myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30)); |
| 163 | 164 | const marker = new BMap.Marker(point, { icon: myIcon }); |
| 164 | - markerList.push({ ...item, marker }); | |
| 165 | + const label = new BMap.Label(name, { | |
| 166 | + position: point, | |
| 167 | + offset: new BMap.Size(-15, -45), | |
| 168 | + }); | |
| 169 | + label.setStyle({ | |
| 170 | + color: '#000', | |
| 171 | + borderRadius: '5px', | |
| 172 | + borderColor: '#ccc', | |
| 173 | + padding: '5px', | |
| 174 | + }); | |
| 175 | + markerList.push({ ...item, marker, label }); | |
| 165 | 176 | }); |
| 166 | 177 | |
| 167 | 178 | markerList.forEach((record) => { |
| 168 | 179 | unref(BMapInstance).addOverlay(record.marker); |
| 180 | + unref(BMapInstance).addOverlay(record.label); | |
| 169 | 181 | const isAlarmStatus = !!record.alarmStatus; |
| 170 | 182 | if (isAlarmStatus) { |
| 171 | 183 | const alarmStatusClassName = 'device-status__alarm'; | ... | ... |