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'; | ... | ... |