medicine-xcx/pagesC/receiving/receivingMap.vue

<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>