//地图标签
<map
id="myMap"
ref="myMap"
show-location
scale="16"
:markers="markers"
:longitude="longitude"
:latitude="latitude"
:controls="controls"
@markertap="clickMarker"
:style="{ height: mapHeight, width: mapWidth }"
//标签赋值
data() {
return {
longitude: '',
latitude: '',
markers: []
}
}
onShow: function() {
//后端加载附近资源资源(这边直接简写结果)
this.markers = [{
height: 25
iconPath: "https://xxx/park-addresss-icon.png"
id: 134.323437
latitude: 28.895885
longitude: 105.427552
width: 21
},{
height: 25
iconPath: "https://xxx/park-addresss-icon.png"
id: 134.324332
latitude: 28.897056
longitude: 105.427276
width: 21
} ... ];
// 大概有140个左右的标签
}
//点击标签方法
clickMarker(e) {
const markerId = e.detail.markerId;
for (let i = 0; i < this.markers.length; i++) {
let item = this.markers[i];
if(markerId === item.id) {
// 标签变大
this.$set(this.markers, i, Object.assign(item, {
width: 38,
height: 44
}));
}
}
}