164 lines
3.5 KiB
Vue
164 lines
3.5 KiB
Vue
<template>
|
|
<view class="content">
|
|
<u-sticky>
|
|
<view class="map">
|
|
<view class="tip">点击红色标记开启导航</view>
|
|
<cover-view class="change-location" @click="chooseAddress">
|
|
<text>切换</text>
|
|
<text>位置</text>
|
|
</cover-view>
|
|
<map class="map" id="map" :longitude="locationInfo.locationLongitude" :latitude="locationInfo.locaitonLatitude"
|
|
scale="12" :show-location="true" :markers="markers" @markertap="goNavigation($event)"></map>
|
|
</view>
|
|
</u-sticky>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
markers: [],
|
|
locationInfo: {},
|
|
longitudeUser: null,
|
|
latitudeUser: null,
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getUserInfo();
|
|
},
|
|
methods: {
|
|
chooseAddress() {
|
|
uni.chooseLocation({
|
|
latitude: this.user.latitude,
|
|
longitude: this.user.longitude,
|
|
success: (data) => {
|
|
this.user.latitude = data.latitude;
|
|
this.user.longitude = data.longitude;
|
|
this.locationListByLl();
|
|
},
|
|
fail: (data) => {
|
|
console.log('104', data)
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "您已拒绝位置授权，请在小程序我的-隐私权限中自行打开授权",
|
|
duration: 3000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
async getUserInfo() {
|
|
const res = await this.$myRequest({
|
|
url: '/getInfo'
|
|
})
|
|
this.user = res.data.user;
|
|
this.locationListByLl();
|
|
},
|
|
// 查询医疗设备场所列表(距离由近至远)
|
|
async locationListByLl() {
|
|
let that = this;
|
|
const res = await this.$myRequest({
|
|
url: '/system/location/locationListByLl/?longitude=' + this.user.longitude +
|
|
'&latitude=' + this.user.latitude,
|
|
data: {
|
|
pageNum: 1,
|
|
pageSize: 10000
|
|
}
|
|
})
|
|
if (res.data.code == 200) {
|
|
this.locationInfo = res.data.rows[0]
|
|
}
|
|
var markers_new = [];
|
|
res.data.rows.forEach((item, index) => {
|
|
markers_new.push({
|
|
id: item.id,
|
|
label: {
|
|
content: item.locationName,
|
|
color: '#FFF',
|
|
fontSize: '18',
|
|
x: -35,
|
|
bgColor: '#3c9cff',
|
|
padding: 5,
|
|
borderRadius: 5
|
|
},
|
|
latitude: item.locaitonLatitude,
|
|
longitude: item.locationLongitude,
|
|
iconPath: '/static/images/point.png',
|
|
width: '30',
|
|
height: '35'
|
|
})
|
|
})
|
|
that.markers = markers_new;
|
|
},
|
|
goNavigation(e) {
|
|
// console.log(e);
|
|
// e.detail.markerId
|
|
let findMarker = this.markers.find(item => {
|
|
return item.id == e.detail.markerId
|
|
})
|
|
// console.log(findMarker);
|
|
uni.openLocation({
|
|
latitude: Number(findMarker.latitude),
|
|
longitude: Number(findMarker.longitude),
|
|
name: findMarker.label.content,
|
|
fail: () => {
|
|
uni.showModal({
|
|
content: '打开地图失败,请重试'
|
|
})
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.tip {
|
|
font-size: 14px;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
color: red;
|
|
padding: 5px 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.change-location {
|
|
position: absolute;
|
|
z-index: 1;
|
|
right: 10rpx;
|
|
bottom: 200rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background-color: #a2d369;
|
|
box-shadow: 0rpx 4rpx 20rpx 4rpx rgba(0, 0, 0, .4);
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.map {
|
|
height: 1600rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.controls {
|
|
position: absolute;
|
|
right: 10rpx;
|
|
top: 300rpx;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
|
|
}
|
|
</style> |