<template>
<view>
<map id="map1" ref="map1" class="map" v-if="isShowMap" :latitude="latitude" :longitude="longitude" :scale="scale"
@controltap="controltap" :show-location="true"></map>
<button @click="addMarkers">updateMarker</button>
</view>
</template>
<script>
export default {
data() {
return {
isShowMap: true,
latitude: 23.099994,
longitude: 113.324520,
scale: 7,
controls: [{
id: 1,
position: {
left: 15,
top: 15
},
iconPath: ../../static/images/map/dlsj-icon.png,
clickable: true
}]
}
},
onReady() {
this.mapContext = uni.createMapContext('map1', this);
this.mapContext.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
});
this.mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);
});
},
methods: {
addMarkers() {
const marker = [{
id: 1,
iconPath: `../../static/images/map/dlsj-icon.png`,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label: {
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
}
}];
this.mapContext.addMarkers({
markers: marker,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
},
}
} </script>
<style>
.map {
width: 750rpx;
height: 400px;
}
</style>
2 个回复
8***@qq.com (作者)
DCloud_UNI_Anne
App-nvue 3.1.0+，微信小程序支持，详见文档说明