<template>
|
<view class="ditu">
|
<map
|
id="mapId"
|
class="ditu_map"
|
:markers="markers"
|
:show-location="true"
|
:latitude="latitude"
|
:longitude="longitude"
|
@markertap="markertap"
|
@callouttap="toNavigation">
|
<cover-view slot="callout">
|
<cover-view v-for="(item,index) in markers" :key="index">
|
<cover-view class="customCallout" :marker-id="item.id">
|
<cover-image class="image" src="@/static/icon/ic_dingwei@2x.png" mode="widthFix"></cover-image>
|
<cover-view class="mm">{{rice * 1000}}米</cover-view>
|
<cover-view class="h"></cover-view>
|
<cover-view class="dh">导航</cover-view>
|
</cover-view>
|
</cover-view>
|
</cover-view>
|
</map>
|
<u-popup :show="show" :overlay="false" :round="10" mode="bottom" @close="show = false">
|
<view class="ditu_box">
|
<view class="ditu_box_a">
|
<text>{{info.title}}</text>
|
<text>距离{{rice * 1000}}m</text>
|
</view>
|
<view class="ditu_box_b">
|
{{info.addr}}
|
</view>
|
<view class="ditu_box_c" @click="toNavigation">导航前往</view>
|
</view>
|
</u-popup>
|
<image class="dw" @click="clickcontrol" src="@/static/icon/map_relocation@2x.png" mode="widthFix"></image>
|
</view>
|
</template>
|
|
<script>
|
import { distance } from '@/utils/utils.js'
|
export default {
|
data() {
|
return {
|
show: false,
|
latitude: '',
|
longitude: '',
|
markers: [],
|
info: {},
|
rice: ''
|
};
|
},
|
onLoad() {
|
this.getAddress()
|
},
|
methods: {
|
// 获取经纬度
|
getAddress() {
|
let that = this;
|
// 1、判断手机定位服务【GPS】 是否授权
|
uni.getSystemInfo({
|
success(res) {
|
let locationEnabled = res.locationEnabled; // 判断手机定位服务是否开启
|
let locationAuthorized = res.locationAuthorized; // 判断定位服务是否允许微信授权
|
if (locationEnabled == false || locationAuthorized == false) {
|
//手机定位服务（GPS）未授权
|
uni.showToast({ title: "请打开手机GPS", icon: "none" });
|
} else {
|
// 2、判断微信小程序是否授权位置信息
|
uni.authorize({
|
//授权请求窗口
|
scope: "scope.userLocation",
|
success: (res) => {
|
that.fnGetlocation();
|
},
|
fail: (err) => {
|
err = err["errMsg"];
|
uni.showModal({ content: "需要授权位置信息", confirmText: "确认授权" })
|
.then((res) => {
|
if (res.confirm) {
|
uni.openSetting({
|
success: (res) => {
|
if (res.authSetting["scope.userLocation"]) {
|
uni.showToast({ title: "授权成功", icon: "success" });
|
that.fnGetlocation();
|
} else {
|
that.getSite()
|
// 未授权
|
uni.showToast({ title: "授权失败,请重新授权", icon: "none" });
|
uni.showModal({
|
title: "授权",
|
content: "获取授权失败,是否前往授权设置？",
|
success: function(result) {
|
if (result.confirm) {
|
uni.openSetting();
|
}
|
},
|
fail: function() {
|
uni.showToast({ title: "系统错误！", icon: "none" });
|
}
|
});
|
}
|
}
|
});
|
}
|
if (res.cancel) {
|
// 取消授权
|
uni.showToast({ title: "你拒绝了授权，无法获得周边信息", icon: "none" });
|
that.getSite()
|
}
|
});
|
}
|
});
|
}
|
},
|
});
|
},
|
// 定位获取
|
fnGetlocation() {
|
let that = this;
|
uni.getLocation({
|
type: "gcj02",
|
altitude: true,
|
isHighAccuracy: true,
|
success: function(res) {
|
that.latitude = res.latitude
|
that.longitude = res.longitude
|
that.getSite()
|
},
|
fail(err) {
|
if (err.errMsg === "getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化") {
|
uni.showToast({ title: "请勿频繁定位", icon: "none" });
|
}
|
if (err.errMsg === "getLocation:fail auth deny") {
|
// 未授权
|
uni.showToast({ title: "无法定位，请重新获取位置信息", icon: "none" });
|
}
|
if (err.errMsg === "getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF") {
|
uni.showModal({ content: "请开启手机定位服务", showCancel: false });
|
}
|
},
|
});
|
},
|
//导航--传终点的坐标即可
|
toNavigation: function() {
|
uni.openLocation({
|
longitude: parseFloat(this.info.longitude),
|
latitude: parseFloat(this.info.latitude),
|
scale: 28,
|
name: this.info.title,
|
address: this.info.addr,
|
success: function (res) {
|
console.log('success:',res);
|
}
|
});
|
},
|
//右下角定位按钮的点击事件
|
clickcontrol(){
|
let mapObjs = uni.createMapContext('mapId', this)
|
mapObjs.moveToLocation({
|
complete: res => {
|
console.log('移动完成:', res)
|
}
|
})
|
},
|
getSite() {
|
this.$u.api.rentSiteList()
|
.then(res => {
|
if (res.code === 200) {
|
this.markers = []
|
res.data.forEach((item, index) => {
|
this.markers.push({
|
id: index,
|
width: 40,
|
height: 40,
|
distance: this.latitude && this.longitude ? distance(this.latitude, this.longitude, item.latitude, item.longitude) : '未知距离',
|
latitude: item.latitude,
|
longitude: item.longitude,
|
title: item.name,
|
iconPath: '/static/icon/ic_bike@2x.png',
|
addr: item.addr,
|
customCallout: {
|
anchorY: 0,
|
anchorX: 0,
|
display: 'BYCLICK'
|
}
|
})
|
})
|
}
|
})
|
},
|
markertap(e) {
|
this.show = false
|
this.markers.forEach(item => {
|
if (item.id === e.markerId) {
|
this.rice = item.distance
|
item.customCallout.display = 'ALWAYS'
|
item.width = 50
|
item.height = 50
|
setTimeout(() => {
|
this.info = item
|
this.show = true
|
}, 300)
|
} else {
|
item.width = 40
|
item.height = 40
|
item.customCallout.display = 'BYCLICK'
|
}
|
})
|
},
|
navigation(item) {
|
uni.openLocation({
|
latitude: Number(item.latitude),
|
longitude: Number(item.longitude),
|
name: '测试名称',
|
address: '测试详细地址',
|
success: function() {
|
console.log('打开地图导航成功');
|
},
|
fail: function(err) {
|
console.log('打开地图导航失败', err);
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.ditu {
|
width: 100vw;
|
height: 100vh;
|
.ditu_map {
|
width: 100%;
|
height: 100%;
|
.customCallout {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 16rpx 20rpx;
|
box-sizing: border-box;
|
height: 80rpx;
|
background: #FFFFFF;
|
border-radius: 50rpx;
|
box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.1);
|
.image {
|
width: 28rpx;
|
height: 28rpx;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
.mm {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #222222;
|
}
|
.h {
|
width: 2rpx;
|
height: 28rpx;
|
margin: 0 16rpx;
|
background-color: #E5E5E5;
|
}
|
.dh {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #01B6AD;
|
}
|
}
|
}
|
.ditu_box {
|
width: 100%;
|
padding: 30rpx 20rpx;
|
box-sizing: border-box;
|
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 58%, #D0FFFD 100%);
|
box-shadow: 0rpx -6rpx 16rpx 0rpx rgba(0,0,0,0.1);
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
.ditu_box_a {
|
width: 100%;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
&:first-child {
|
font-size: 34rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #222222;
|
}
|
&:last-child {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #01B6AD;
|
}
|
}
|
}
|
.ditu_box_b {
|
width: 100%;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
margin-top: 6rpx;
|
}
|
.ditu_box_c {
|
width: 100%;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: #01B6AD;
|
box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(1,182,173,0.24);
|
border-radius: 46rpx;
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
margin-top: 40rpx;
|
}
|
}
|
.dw {
|
width: 80rpx;
|
height: 80rpx;
|
position: absolute;
|
right: 18rpx;
|
bottom: calc(env(safe-area-inset-bottom) + 300rpx);
|
}
|
}
|
</style>
|
