<template>

<view class="content">

<map id="map" :latitude="latitude" :longitude="longitude"

:style="{ width: '100%', height: windowHeight + 'px' }" :scale="10" @markertap="markTap"></map>

</view>

</template>

<script>

export default {

data() {

return {

_mapContext: null,

windowHeight: 0,

latitude: 23.099994,

longitude: 113.324520,

}

},

onLoad() {

},

onReady() {

uni.getSystemInfo({

success: (res) => {

this.windowHeight = res.windowHeight;

},

});

// 创建map对象

this._mapContext = uni.createMapContext("map", this);

this.cluster();

},

methods: {

markTap(e) {

console.log('ccccccc')

console.log(e)

console.log('ccccccc')

uni.showToast({

title: `客户名称${e.markerId}`

})

},

// 点聚合

cluster() {

// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})

this._mapContext.initMarkerCluster({

enableDefaultStyle: false, // 是否使用默认样式

zoomOnClick: true, // 点击聚合的点，是否改变地图的缩放级别

gridSize: 60, // 聚合计算时网格的像素大小，默认60

complete(res) {

console.log('initMarkerCluster', res)

}

});

this._mapContext.on("markerClusterCreate", (res) => {

console.log("markerClusterCreate", res);

const clusters = res.clusters

const markers = clusters.map(cluster => {

const {

center,

clusterId,

markerIds

} = cluster

return {

...center,

width: 0,

height: 0,

clusterId, // 必须

label: {

content: markerIds.length + '',

fontSize: 16,

color: '#ffffff',

width: 50,

height: 50,

bgColor: '#00A3FA',

borderRadius: 25,

textAlign: 'center',

anchorX: 0,

anchorY: -20,

}

}

})

this._mapContext.addMarkers({

markers,

clear: false,

complete(res) {

console.log('clusterCreate addMarkers', res)

}

})

});

this._mapContext.on('markerCl