You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
8.1 KiB
281 lines
8.1 KiB
<template>
|
|
<view class="receiving-map position-relative flex-1">
|
|
<!-- 地图 -->
|
|
<view class="map">
|
|
<map id="myMap" style="width: 100%; height: 44vh" :subkey="mapKey"
|
|
:latitude="latitude" :longitude="longitude" :markers="markers" :layer-style="1"
|
|
@regionchange="onMapDrag" show-location>
|
|
<!-- :polyline="polyline" 线-->
|
|
<cover-image class="locate-img" src="https://cheum.oss-cn-beijing.aliyuncs.com/chemuXcx-img/newimg/locate2.png"></cover-image>
|
|
<cover-view class="location-img-box" @click="test">
|
|
<cover-image class="location-img" :src="IMG_URL + 'location.png'"></cover-image>
|
|
</cover-view>
|
|
|
|
</map>
|
|
|
|
<view class="receiving-map-container position-absolute zIndex-1">
|
|
<view class="flex align-center justify-between p-l-20 p-r-20">
|
|
<view class="flex align-center receiving-map-container-title u-line-1">
|
|
<u-icon name="map" color="##707070" size="40" />
|
|
<text class="text-grey font-26 m-l-10 u-line-1">{{ locale }}</text>
|
|
</view>
|
|
<text class="text-grey font-26 m-l-10">(当前定位)</text>
|
|
</view>
|
|
<!-- <scroll-view scroll-y class="receiving-map-container-scroll" >
|
|
<view class="m-l-20 m-r-20">
|
|
<receiving-item v-for="item in 10" :key="item" />
|
|
</view>
|
|
</scroll-view> -->
|
|
<view class="receiving-map-container-scroll">
|
|
<view class="font-28 font-weight-bold text-black flex flex-wrap align-center justify-center receiving-map-container-tips">
|
|
<text class="m-b-16">您附近1.5KM内没有取货点，</text>
|
|
<text class="m-b-16">可以添加收货地址让快递小哥送货哟！</text>
|
|
<text class="m-b-16 text-grey">*(运费自理，满100包邮）</text>
|
|
</view>
|
|
|
|
<view class="receiving-map-container-btn">
|
|
<u-button type="primary" @click="toAdd">去添加收货地址</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
/**
|
|
* map 用到的属性
|
|
* @param width map宽度
|
|
* @param height map高度
|
|
* @param latitude 中心纬度getLocation
|
|
* @param longitude 中心经度
|
|
* @param scale 缩放级别，取值范围为5-18
|
|
* @param markers 标记点
|
|
* @param show-location 显示带有方向的当前定位点
|
|
* @param @markertap 点击标记点时触发
|
|
* @param @labeltap 点击label时触发，e.detail = {markerId} 微信小程序2.9.0
|
|
* @param @callouttap 点击标记点对应的气泡时触发，e.detail = {markerId}
|
|
* @param @controltap 点击控件时触发，e.detail = {controlId}
|
|
* */
|
|
import QQMapWX from '@/plugin/map/qqmap-wx-jssdk.min.js'
|
|
import { IMG_URL } from '@/env.js'
|
|
import { MAP_KEY } from '@/config/settings.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
mapKey: MAP_KEY,
|
|
IMG_URL,
|
|
xuanran:true,//是否渲染地图
|
|
showLocate:true,//展示地图上的标记点
|
|
markers: [], // 标记点列表
|
|
latitude: 0, // 当前位置经纬度
|
|
longitude: 0, // 当前位置经纬度
|
|
center : ['', ''],
|
|
show: false, // 众筹店铺详细信息显示隐藏
|
|
qqmapsdk: '',
|
|
locale: ''
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.qqmapsdk = new QQMapWX({
|
|
key: this.mapKey // 必填
|
|
})
|
|
this.handleAuthorize()
|
|
},
|
|
onShow() {
|
|
//调用地图信息
|
|
},
|
|
onHide() {
|
|
},
|
|
methods: {
|
|
toAdd () {
|
|
this.$tools.navigateTo({
|
|
url: '/pages/my/address/address?type=set_location'
|
|
})
|
|
},
|
|
test () {
|
|
this.handleAuthorize()
|
|
},
|
|
// 距离换算
|
|
getDistance(val){
|
|
return ((val/1000)*1).toFixed(2) + 'km'
|
|
},
|
|
// 授权定位
|
|
handleAuthorize() {
|
|
uni.authorize({
|
|
scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
|
|
success: res => {
|
|
this.getLocationFn()
|
|
},
|
|
// 授权失败
|
|
fail(err) {
|
|
err = err['errMsg']
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '为了您的体验，请授权定位服务。',
|
|
showCancel: false,
|
|
confirmText: '确认授权',
|
|
}).then(res => {
|
|
// 这里只设置了确认按钮，没有取消按钮
|
|
//res ： [null, {cancel: false, confirm: true, errMsg: 'showModal: ok'}]
|
|
if (res[1]['confirm']) {
|
|
// 点击了确认按钮时
|
|
// 调用下边方法时，会弹出 【使用我的地理位置】界面， 未设置直接返回，还是会走fail授权失败的函数，
|
|
// 还是会弹出上边的温馨提示！！！
|
|
// 如果设置, scope.userLocation: true
|
|
uni.openSetting({
|
|
success(res) {
|
|
// 如果不设置，res结果：
|
|
// {errMsg: "openSetting:ok", authSetting: {scope.userLocation: false}}
|
|
// 如果设置, res结果：
|
|
// {errMsg: "openSetting:ok", authSetting: {scope.userLocation: true}}
|
|
// console.log('小程序设置界面：', res)
|
|
},
|
|
})
|
|
}
|
|
})
|
|
},
|
|
})
|
|
},
|
|
|
|
getLocationFn() {
|
|
uni.getLocation({
|
|
type: 'gcj02', // <map> 组件默认为国测局坐标gcj02
|
|
altitude: true,
|
|
success: res => {
|
|
console.log(res);
|
|
this.latitude = res.latitude
|
|
this.longitude = res.longitude
|
|
this.getMarkeres(this.latitude,this.longitude);
|
|
},
|
|
fail: error =>{
|
|
console.log('error-------',error)
|
|
this.latitude = ''
|
|
this.longitude = ''
|
|
this.getMarkeres('','')
|
|
}
|
|
})
|
|
},
|
|
onMapDrag(e){
|
|
var map = uni.createMapContext('myMap', this);
|
|
map.getCenterLocation({
|
|
success:(res)=>{
|
|
console.log(res)
|
|
this.qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
},
|
|
success: (location) => {
|
|
let {result} = location
|
|
console.log('location=======>',result,result.formatted_addresses.recommend)
|
|
this.locale = result.formatted_addresses.recommend
|
|
},
|
|
})
|
|
setTimeout(()=>{
|
|
this.getMarkeres(res.latitude, res.longitude)
|
|
},1000)
|
|
}
|
|
})
|
|
},
|
|
// 获取取货列表
|
|
getMarkeres (longitude, latitude) {
|
|
|
|
// let arr = [longitude, latitude]
|
|
// arr = arr.join()
|
|
let imgUrl = 'https://cheum.oss-cn-beijing.aliyuncs.com/chemuXcx-img/index/'
|
|
// this.queryMerchantInfo({
|
|
// lon: latitude,
|
|
// lat: longitude
|
|
// }).then(res => {
|
|
// this.nearlyList = res.result.slice(0, 3)
|
|
// // 添加气泡
|
|
// let num = 0
|
|
// res.result.forEach((item, i) => {
|
|
// num++
|
|
// item.longitLat = item.longitLat.split(',')
|
|
// item.business = item.business.split("、")
|
|
let mk = {
|
|
id: 1, //marker 序号
|
|
width: '53rpx', //marker 宽度
|
|
height: '60rpx', //marker 高度
|
|
iconPath: imgUrl + 'markersImg-2.png', //marker 图标路径
|
|
// iconPath: item.type == 2 ? imgUrl + 'markersImg-1.png' : imgUrl + 'markersImg-2.png', //marker 图标路径
|
|
longitude, //marker 经度
|
|
latitude: 90, //marker 纬度
|
|
name: 'Cheum车姆',
|
|
callout: {
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
color: '#333333',
|
|
fontSize: 10,
|
|
content: 'Cheum车姆',
|
|
display:'ALWAYS'
|
|
}
|
|
}
|
|
// if(this.xuanran){
|
|
this.markers.push(mk)
|
|
// console.log(this.markers)
|
|
// // this.xuanran = false
|
|
// }
|
|
// if(num === res.result.length){
|
|
// this.xuanran = false
|
|
// }
|
|
// })
|
|
|
|
// // 初始化onMapDragNum
|
|
// this.onMapDragNum = 0
|
|
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.locate-img {
|
|
width: 50rpx;
|
|
height: 82rpx;
|
|
position: fixed;
|
|
top: 22vh;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
}
|
|
.location-img-box {
|
|
position: fixed;
|
|
top: 40vh;
|
|
right: 0;
|
|
transform: translate(-20%, -110%);
|
|
}
|
|
.location-img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
.receiving-map {
|
|
&-container {
|
|
width: 100vw;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 60vh;
|
|
background: #fff;
|
|
border-radius: 47rpx 47rpx 0px 0px;
|
|
&-title {
|
|
width: 78%;
|
|
height: 80rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
&-scroll {
|
|
height: calc(60vh - 80rpx);
|
|
}
|
|
|
|
&-tips {
|
|
padding-top: 80rpx;
|
|
margin-bottom: 200rpx;
|
|
}
|
|
|
|
|
|
&-btn {
|
|
padding: 0 150rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|