</view>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, computed, watch, nextTick } from 'vue';
import { getCurrentInstance } from 'vue';
import config from "@/config";
const img = '/static/logo.png';
const { ctx }: any = getCurrentInstance();
// 地图属性
const data = reactive({
title: 'map',
scale: 16,
latitude: 13.743980890903845,
longitude: 100.48840066400577,
markers: [] as Array<any>
});
const mapContext = ref<UniApp.MapContext>();
const platform = ref('');
const markers = ref([]);
const mounted = () => {
platform.value = uni.getSystemInfoSync().platform;
nextTick(()=> {
mapContext.value = uni.createMapContext("map", ctx);
addClusters();
});
setTimeout(() => {
addMarkers([{
latitude: 13.743980890903845,
longitude: 100.48840066400577,
treeNodeId: 22132132,
},{
latitude: 13.753980890903845,
longitude: 100.48840066400577,
treeNodeId: 22132133,
},{
latitude: 13.750980890903845,
longitude: 100.48840066400577,
treeNodeId: 22132134,
}]);
}, 1000)
}
/**
- 添加聚合点
*/
const addClusters = () => {
// 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
mapContext.value?.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res: any) {
console.log('initMarkerCluster', res)
}
});
//聚合点创建监听事件,需要重新设置聚合点的样式(图标,文本),不然不会显示
mapContext.value?.on("markerClusterCreate", (e: any) => {
console.log("markerClusterCreate", e);
let clusterMarkers = [] as Array<any>
const clusters = e.clusters // 新产生的聚合簇
clusters.forEach((cluster: any, index: any) => {
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster
const content = (markerIds.length > 99 ? '99+' : markerIds.length) + '';
let clusterObj = {
clusterId, //必须
...center,
width: 40,
height: 40,
iconPath: img,
label: { // 定制聚合簇样式
content: content,
fontSize: 16,
color: '#ffffff',
textAlign: 'center',
anchorX: platform.value === 'ios'? undefined : (content.length > 1? -9 : -5),
anchorY: platform.value === 'ios'? -30 : -10,
},
// {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
anchor: {
x: 0.5,
y: 0.5
}
}
clusterMarkers.push(clusterObj)
})
// 添加聚合簇
mapContext.value?.addMarkers({
markers: clusterMarkers,
clear: false, //是否先清空地图上所有的marker
})
});
mapContext.value?.on('markerClusterClick', (res: any) => {
showStationDetail(res.cluster.markerIds);
});
}
/**
- 判断纬度是否合法,纬度的合法范围在 -90 到 90 之间。
- @param latitude 维度
*/
const isValidLatitude = (latitude: string)=> {
return Number(latitude) >= -90 && Number(latitude) < 90;
}
/**
- 判断经度是否合法,经度的合法范围在 -180 到 180 之间。
- @param longitude
*/
const isValidLongitude = (longitude: string)=> {
return Number(longitude) >= -180 && Number(longitude) <= 180;
}
/**
- 生成markId,使用treedId,长度大于9时取后面9位
- @param treeId
*/
const getMarkId = (treeId:string): number => {
const id = treeId.length > 9? treeId.slice(treeId.length - 9, treeId.length) : treeId;
return Number(id);
}
/**
- 添加标记点
-
@param stationList 站点列表
*/
const addMarkers = (stationList ?: Array<any>) => {
if (!mapContext.value) {
return;
}
stationList = stationList || [];
const positions = stationList.filter(item => item.latitude
&& item.longitude
&& isValidLatitude(item.latitude)
&& isValidLongitude(item.longitude)).map(item => {
return {
id: getMarkId(item.treeNodeId),
latitude: Number(item.latitude),
longitude: Number(item.longitude),
// iconPath: img,
}
});const markers = [] as Array<any>
positions.forEach((p, i) => {
markers.push(
Object.assign({}, {
width: 40,
height: 40,
// joinCluster: true, // 指定了该参数才会参与聚合
// anchor: {
// x: 0.5,
// y: 0.5
// }
}, p)
)
});// data.markers = markers;
console.log('addMarkers', markers)
console.log("mapContext.value", mapContext.value)
mapContext.value?.addMarkers({
markers,
clear: true,
complete(res) {
console.log('addMarkers', res)
}
})
};
// 点击标记点事件处理
const onMarker = (e: any) => {
console.log('onMarker');
uni.showToast({
duration: 1500,
title: '点击了标记点',
icon: 'none'
})
}
const onTap = (e: any) => {
console.log('onTap', e);
}
onMounted(mounted);
</script>
<style lang="scss" scoped>
@import './index';
</style>
1 个回复
浩楠啊
请问解决了嘛??