删除没有的代码
This commit is contained in:
parent
db76832051
commit
370172dd56
|
|
@ -1,108 +0,0 @@
|
|||
import { getApi } from "@/utils/common.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 29.519418, // 纬度
|
||||
longitude: 106.687094, // 经度
|
||||
allMarkers: [] // 标记点
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 1.页面准备好后,获取到map组件的执行上下文。注意:这里是取的map的id属性
|
||||
this.mapContext = uni.createMapContext("alarm_map", this);
|
||||
// 2.请求数据
|
||||
this.getallStations()
|
||||
},
|
||||
methods: {
|
||||
getallStations() {
|
||||
uni.showLoading()
|
||||
let obj = {
|
||||
id: id,
|
||||
stationQuery: query
|
||||
}
|
||||
getApi(obj).then(res => {
|
||||
uni.hideLoading();
|
||||
if (res.code == 0) {
|
||||
if (!Array.isArray(res.data) || res.data.length <= 0) return
|
||||
// 拿到请求数据后,把数据传给点聚合功能;
|
||||
this.setMarkersAndCluster(res.data) // 3、调用聚合功能
|
||||
}
|
||||
})
|
||||
},
|
||||
// 聚合功能
|
||||
setMarkersAndCluster(markerList) {
|
||||
// 1.组装数据之后,并赋值给地图上的marker
|
||||
this.allMarkers = Array.from(markerList).map((item, i) => {
|
||||
return {
|
||||
...item,
|
||||
width: 41,
|
||||
height: 41,
|
||||
iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
joinCluster: true, // 这个属性很重要,必须要
|
||||
callout: { // 自定义标记点上方的气泡窗口
|
||||
content: '***聚合1',
|
||||
display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
|
||||
padding: 5,
|
||||
textAlign: 'center',
|
||||
color: '#C2874D',
|
||||
borderRadius: 4
|
||||
},
|
||||
label: { // 为标记点旁边增加标签
|
||||
content: '你好,marker',
|
||||
borderColor: '#ff0000',
|
||||
bgColor: '#ffffff'## 标题
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
// 2.初始化点聚合的配置,未调用时采用默认配置
|
||||
this.mapContext.initMarkerCluster({
|
||||
enableDefaultStyle: false, // 是否启用默认的聚合样式(是否用自定义图标)
|
||||
zoomOnClick: true,
|
||||
gridSize: 60,
|
||||
complete(res) {
|
||||
console.log('initMarkerCluster', res)
|
||||
}
|
||||
});
|
||||
|
||||
// 3.发生聚合时,给聚合点设置marker标签
|
||||
this.mapContext.on('markerClusterCreate', res => {
|
||||
const clusters = res.clusters // 新产生的聚合簇
|
||||
const zhou = clusters.map(item=> {
|
||||
const {
|
||||
center, // 聚合点的经纬度数组
|
||||
clusterId, // 聚合簇id
|
||||
markerIds // 已经聚合了的标记点id数组
|
||||
} = item
|
||||
|
||||
return {
|
||||
...center,
|
||||
width: 50,
|
||||
height: 50,
|
||||
clusterId, // 必须有
|
||||
iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
|
||||
borderRadius: 8,
|
||||
joinCluster: true,
|
||||
label: { // 定制聚合点样式
|
||||
content: markerIds.length + '',
|
||||
fontSize: 14,
|
||||
width: 18,
|
||||
height: 18,
|
||||
color: '#ffffff',
|
||||
bgColor: '#C2874D',
|
||||
borderRadius: 6,
|
||||
textAlign: 'center',
|
||||
anchorX: 25,
|
||||
anchorY: -60,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 4. 添加聚合簇标签
|
||||
this.mapContext.addMarkers({
|
||||
markers: zhou,
|
||||
clear: false, //是否先清空地图上所有的marker
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue