删除没用的 页面
This commit is contained in:
parent
fa44229ed2
commit
81a0a7ba3d
|
|
@ -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