|
|
<template>
|
|
|
<view>
|
|
|
<cpn-navbar title="护理地图" :isBack="true"></cpn-navbar>
|
|
|
|
|
|
<map id="map" :latitude="location.latitude" :longitude="location.longitude" @markertap="markertap"></map>
|
|
|
|
|
|
<u-popup v-model="isShowPopup" mode="bottom" :mask="false" height="294rpx" :border-radius="40">
|
|
|
<view class="top">
|
|
|
<view class="left">
|
|
|
<view class="name">{{selectMarker.label.content}}</view>
|
|
|
<view class="sex">女</view>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<view class="icon icon3"></view>
|
|
|
<view class="text">进行中</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="center">
|
|
|
<view class="tel">
|
|
|
<view>
|
|
|
<u-icon name="phone" size="28" color="#1479FF"></u-icon>
|
|
|
</view>
|
|
|
<view class="text">158****5455</view>
|
|
|
</view>
|
|
|
<view class="address">
|
|
|
<view>
|
|
|
<u-icon name="map" size="28" color="#1479FF"></u-icon>
|
|
|
</view>
|
|
|
<view class="text">通园路666号（地图：通园路66号）</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="bottom">
|
|
|
<view class="distance">
|
|
|
<view class="distance-icon">
|
|
|
<u-image src="/static/todayNursing/distance.png" height="42" width="42"></u-image>
|
|
|
</view>
|
|
|
<view class="distance-text">距您1.7km</view>
|
|
|
</view>
|
|
|
<view class="to-there">
|
|
|
<view class="to-there-text">去那里</view>
|
|
|
<view class="to-there-icon">
|
|
|
<u-image src="/static/todayNursing/to-there.png" height="46" width="46"></u-image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
mapCtx: null,
|
|
|
location: {
|
|
|
latitude: null,
|
|
|
longitude: null,
|
|
|
covers: []
|
|
|
},
|
|
|
isShowPopup: false,
|
|
|
selectMarker: null,
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
async markertap(e) {
|
|
|
let marker = this.covers[e.detail.markerId - 1]
|
|
|
this.selectMarker = marker
|
|
|
console.log(marker);
|
|
|
this.isShowPopup = true
|
|
|
|
|
|
this.mapCtx.moveToLocation({
|
|
|
longitude: marker.longitude,
|
|
|
latitude: marker.latitude
|
|
|
})
|
|
|
|
|
|
},
|
|
|
async getNowLocation() {
|
|
|
const location = (await uni.getLocation())[1]
|
|
|
this.location.latitude = location.latitude
|
|
|
this.location.longitude = location.longitude
|
|
|
},
|
|
|
updateClusters(clusters) {
|
|
|
let clusterMarkers = []
|
|
|
clusters.forEach(item => {
|
|
|
const {
|
|
|
center,
|
|
|
clusterId,
|
|
|
markerIds
|
|
|
} = item
|
|
|
let clusterObj = {
|
|
|
clusterId,
|
|
|
...center,
|
|
|
width: 20,
|
|
|
height: 24,
|
|
|
iconPath: "/static/map/done.png",
|
|
|
joinCluster: true,
|
|
|
label: { // 定制聚合簇样式
|
|
|
content: markerIds.length + '人',
|
|
|
fontSize: 16,
|
|
|
color: '#36596A',
|
|
|
width: 50,
|
|
|
height: 25,
|
|
|
bgColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
borderRadius: 5,
|
|
|
textAlign: 'center',
|
|
|
anchorX: 0,
|
|
|
anchorY: 0,
|
|
|
}
|
|
|
}
|
|
|
clusterMarkers.push(clusterObj)
|
|
|
})
|
|
|
this.mapCtx.addMarkers({
|
|
|
markers: clusterMarkers,
|
|
|
clear: false
|
|
|
})
|
|
|
},
|
|
|
|
|
|
getCovers() {
|
|
|
this.covers = [{
|
|
|
id: 1,
|
|
|
latitude: 31.26000,
|
|
|
longitude: 120.63000,
|
|
|
width: 14,
|
|
|
height: 18,
|
|
|
iconPath: '/static/map/doing.png',
|
|
|
joinCluster: true,
|
|
|
label: {
|
|
|
content: "冯晓梅",
|
|
|
fontSize: 14,
|
|
|
color: '#36596A',
|
|
|
width: 54,
|
|
|
height: 25,
|
|
|
bgColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
borderRadius: 5,
|
|
|
textAlign: 'center',
|
|
|
anchorX: 0,
|
|
|
anchorY: 0,
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
latitude: 31.26044,
|
|
|
longitude: 120.63013,
|
|
|
width: 14,
|
|
|
height: 18,
|
|
|
iconPath: '/static/map/done.png',
|
|
|
joinCluster: true,
|
|
|
label: {
|
|
|
content: "项小北",
|
|
|
fontSize: 14,
|
|
|
color: '#36596A',
|
|
|
width: 54,
|
|
|
height: 25,
|
|
|
bgColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
borderRadius: 5,
|
|
|
textAlign: 'center',
|
|
|
anchorX: 0,
|
|
|
anchorY: 0,
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
latitude: 31.24998,
|
|
|
longitude: 120.63007,
|
|
|
width: 14,
|
|
|
height: 18,
|
|
|
iconPath: '/static/map/done.png',
|
|
|
joinCluster: true,
|
|
|
label: {
|
|
|
content: "冯晓梅",
|
|
|
fontSize: 14,
|
|
|
color: '#36596A',
|
|
|
width: 54,
|
|
|
height: 25,
|
|
|
bgColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
borderRadius: 5,
|
|
|
textAlign: 'center',
|
|
|
anchorX: 0,
|
|
|
anchorY: 0,
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: 4,
|
|
|
latitude: 31.23451,
|
|
|
longitude: 120.62768,
|
|
|
width: 14,
|
|
|
height: 18,
|
|
|
iconPath: '/static/map/todo.png',
|
|
|
joinCluster: true,
|
|
|
label: {
|
|
|
content: "项小北",
|
|
|
fontSize: 14,
|
|
|
color: '#36596A',
|
|
|
width: 54,
|
|
|
height: 25,
|
|
|
bgColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
borderRadius: 5,
|
|
|
textAlign: 'center',
|
|
|
anchorX: 0,
|
|
|
anchorY: 0,
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: 5,
|
|
|
latitude: 31.26014,
|
|
|
longitude: 120.63066,
|
|
|
width: 14,
|
|
|
height: 18,
|
|
|
iconPath: '/static/map/todo.png',
|
|
|
joinCluster: true,
|
|
|
label: {
|
|
|
content: "冯晓梅",
|
|
|
fontSize: 14,
|
|
|
color: '#36596A',
|
|
|
width: 54,
|
|
|
height: 25,
|
|
|
bgColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
borderRadius: 5,
|
|
|
textAlign: 'center',
|
|
|
anchorX: 0,
|
|
|
anchorY: 0,
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
this.mapCtx.addMarkers({
|
|
|
markers: this.covers,
|
|
|
clear: false,
|
|
|
complete: (res) => {}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.getNowLocation()
|
|
|
},
|
|
|
async onReady() {
|
|
|
this.mapCtx = uni.createMapContext("map", this)
|
|
|
this.mapCtx.initMarkerCluster({
|
|
|
enableDefaultStyle: false,
|
|
|
zoomOnClick: true,
|
|
|
gridSize: 20
|
|
|
})
|
|
|
this.mapCtx.on("markerClusterCreate", e => {
|
|
|
this.updateClusters(e.clusters)
|
|
|
})
|
|
|
|
|
|
this.getCovers()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
// 待护理
|
|
|
.icon1 {
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
background: #FDB030;
|
|
|
border-radius: 100%;
|
|
|
|
|
|
margin-right: 14rpx;
|
|
|
}
|
|
|
|
|
|
//已完成
|
|
|
.icon2 {
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
background: #1173FF;
|
|
|
border-radius: 100%;
|
|
|
|
|
|
margin-right: 14rpx;
|
|
|
}
|
|
|
|
|
|
//进行中
|
|
|
.icon3 {
|
|
|
width: 12rpx;
|
|
|
height: 12rpx;
|
|
|
background: #2EC28B;
|
|
|
border-radius: 100%;
|
|
|
|
|
|
margin-right: 14rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
content: '';
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
|
border: 2rpx solid #2EC28B;
|
|
|
border-radius: 100%;
|
|
|
animation: icon-scale 3s linear infinite;
|
|
|
|
|
|
position: absolute;
|
|
|
top: -8rpx;
|
|
|
left: -8rpx;
|
|
|
}
|
|
|
|
|
|
@keyframes icon-scale {
|
|
|
|
|
|
0%,
|
|
|
30%,
|
|
|
100%,
|
|
|
40% {
|
|
|
transform: scale(0.7, 0.7);
|
|
|
}
|
|
|
|
|
|
70% {
|
|
|
transform: scale(1, 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
map {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
}
|
|
|
|
|
|
/deep/.u-drawer-bottom {
|
|
|
box-shadow: 2rpx 6rpx 10rpx 10rpx rgba(206, 204, 204, 0.5);
|
|
|
}
|
|
|
|
|
|
|
|
|
.top {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding-top: 50rpx;
|
|
|
|
|
|
.left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
padding-left: 40rpx;
|
|
|
|
|
|
.name {
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
}
|
|
|
|
|
|
.sex {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
background: #FDECEC;
|
|
|
opacity: 0.5;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #36596A;
|
|
|
line-height: 40rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
padding-right: 40rpx;
|
|
|
|
|
|
.icon {
|
|
|
margin-right: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.center {
|
|
|
|
|
|
padding-left: 40rpx;
|
|
|
padding-top: 18rpx;
|
|
|
|
|
|
.tel {
|
|
|
height: 40rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #36596A;
|
|
|
line-height: 40rpx;
|
|
|
display: flex;
|
|
|
|
|
|
.text {
|
|
|
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.address {
|
|
|
height: 40rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #36596A;
|
|
|
line-height: 40rpx;
|
|
|
display: flex;
|
|
|
|
|
|
margin-top: 8rpx;
|
|
|
|
|
|
.text {
|
|
|
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
.distance {
|
|
|
align-items: center;
|
|
|
display: flex;
|
|
|
|
|
|
.distance-icon {
|
|
|
|
|
|
padding-left: 40rpx;
|
|
|
}
|
|
|
|
|
|
.distance-text {
|
|
|
height: 34rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #A7AFBC;
|
|
|
line-height: 34rpx;
|
|
|
|
|
|
padding-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.to-there {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
margin-right: 40rpx;
|
|
|
|
|
|
.to-there-text {
|
|
|
height: 34rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #A7AFBC;
|
|
|
line-height: 34rpx;
|
|
|
|
|
|
margin-right: 14rpx;
|
|
|
}
|
|
|
|
|
|
.to-there-icon {
|
|
|
|
|
|
margin-left: 3rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
