markers="markersList" @markertap="markertap">
</map> </view>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue';
const { ctx } : any = getCurrentInstance();
const mapCtx : any = ref({}); // 地图对象
const markersList : any = ref([]); // 点列表
const longitude = ref(113.549777);
const latitude = ref(22.391789);
const statusBarHeight = ref(0); // 电池栏高
const screenHeight = ref(0); // 屏幕高
onMounted(() => {
uni.hideTabBar({})
init(); })
/**
-
初始化
*/
const init = async () => {let systemInfo = uni.getSystemInfoSync();
statusBarHeight.value = systemInfo.statusBarHeight;
screenHeight.value = systemInfo.screenHeight;nextTick(() => {
mapCtx.value = uni.createMapContext("myMap", ctx);
allMarkersShow();setTimeout(()=>{ markersList.value = [ { "width": 35, "height": 35, "id": 0, "iconPath": "/static/images/home/mall-position.png", "latitude": 22.391789, "longitude": 113.549777, "joinCluster": true, "zIndex": 99999, "customCallout": { "anchorY": 35, "anchorX": 0, "display": "ALWAYS" }, "acFreeGunCount": null, "dcFreeGunCount": null, "acGunTotalCount": 0, "dcGunTotalCount": 0, "staPkId": "012744040201", "minPrice": "--" }, { "width": 35, "height": 35, "id": 1, "iconPath": "/static/images/home/mall-position.png", "latitude": 22.39327, "longitude": 113.549585, "joinCluster": true, "zIndex": 99999, "customCallout": { "anchorY": 35, "anchorX": 0, "display": "ALWAYS" }, "acFreeGunCount": 0, "dcFreeGunCount": 0, "acGunTotalCount": 63, "dcGunTotalCount": 45, "staPkId": "012744040232", "minPrice": "--" }, { "width": 35, "height": 35, "id": 2, "iconPath": "/static/images/home/mall-position.png", "latitude": 22.38902, "longitude": 113.550245, "joinCluster": true, "zIndex": 99999, "customCallout": { "anchorY": 35, "anchorX": 0, "display": "ALWAYS" }, "acFreeGunCount": 0, "dcFreeGunCount": 0, "acGunTotalCount": 26, "dcGunTotalCount": 0, "staPkId": "012744040225", "minPrice": "--" }, { "width": 35, "height": 35, "id": 3, "iconPath": "/static/images/home/mall-position.png", "latitude": 22.390667, "longitude": 113.551034, "joinCluster": true, "zIndex": 99999, "customCallout": { "anchorY": 35, "anchorX": 0, "display": "ALWAYS" }, "acFreeGunCount": 0, "dcFreeGunCount": 0, "acGunTotalCount": 0, "dcGunTotalCount": 30, "staPkId": "012744040226", "minPrice": "--" }, { "width": 35, "height": 35, "id": 4, "iconPath": "/static/images/home/mall-position.png", "latitude": 22.38902, "longitude": 113.550244, "joinCluster": true, "zIndex": 99999, "customCallout": { "anchorY": 35, "anchorX": 0, "display": "ALWAYS" }, "acFreeGunCount": 0, "dcFreeGunCount": 0, "acGunTotalCount": 0, "dcGunTotalCount": 9, "staPkId": "012744040229", "minPrice": "--" }, ] },2000)})
}
/**
-
点聚合初始化
*/
const allMarkersShow = () => {
mapCtx.value.initMarkerCluster({ // 初始化点聚合的配置
enableDefaultStyle: false, // 是否使用默认样式
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster........', res)
}
});
// 新的聚合簇产生时触发mapCtx.value.on("markerClusterCreate", (e : any) => {
// console.log(e);
let clusterMarkers = []
const clusters = e.clusters // 新产生的聚合簇
clusters.forEach((cluster : any, index : number) => {
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster
if (markerIds.length > 1) {
let content = markerIds.length > 100 ? '99+' : markerIds.length + ''
let clusterObj = {
clusterId, //必须
...center,
width: 136,
height: 140,
iconPath: '/static/images/home/all-markers.png',
joinCluster: false,
}
clusterMarkers.push(clusterObj)
}
})if (clusterMarkers.length > 0) { // 添加聚合簇 mapCtx.value.addMarkers({ markers: clusterMarkers, clear: false, //是否先清空地图上所有的marker }) }});
}
const markertap = (e : any) => {
console.log('???????????????????')
}
</script>
2 个回复
4***@qq.com (作者)
有没有人回复一下啊，不要这样子。，，，
CY2021 - VX：w526275688
官方文档有毒 不用createMapContext就好了 去掉 createMapContext的逻辑 用map组件的markers传参 就能点了