<template> <view class="map-box"> <map id="maps" class="tui-maps" :longitude="longitude" :latitude="latitude" :scale="16" @regionchange="regionchange" :style="{'width':windowWidth+'px','height':'300px'}"> <cover-image class="cover-image" src="../../../static/img/location.png" /> <cover-view class="tip">您可以拖动地图,标记当前精准位置</cover-view> </map> <view class="gps-body" v-if="poiss.length > 0"> <scroll-view scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true" style="height:720rpx;"> <block v-for="(item,index) in poiss" :key="item.id"> <view class="gps-lists"> <text class="gps-title">{{item.title}}</text> <view class="gps-flex"> <view class="gps-view">{{item.address}}</view> <view style="margin-top:-18rpx;"> <radio-group @change="radioChange(item,index)"> <radio :checked="index === current" /> </radio-group> </view> </view> </view> </block> </scroll-view> </view> <view class="but"> <button type="primary" @click="handleConfirm"> 确认位置 </button> </view> </view> </template> <script> const QQMapWX = require('../../../Utils/js/qqmap-wx-jssdk') const qqmapsdk = new QQMapWX({ key: '7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB' }) let app = getApp(); export default { data() { return { longitude: null, latitude: null, windowWidth: 0, poiss: [], scrollTop: 0, current: 0, address: {}, mapContext: null } }, //第一次初始化用户位置信息 onLoad() { try { var th_is = this; th_is.mapContext = uni.createMapContext('maps') const res = uni.getSystemInfoSync(); th_is.windowWidth = res.windowWidth; uni.showLoading({ title: '正在获取定位中', }); uni.getLocation({ type: 'gcj02', isHighAccuracy: 'true', geocode: 'true', success: (res) => { th_is.longitude = res.longitude; th_is.latitude = res.latitude; uni.hideLoading(); th_is.getAddress(th_is.latitude, th_is.longitude); } }) } catch (e) { // error } }, methods: { //每移动一次获取周围地址 regionchange(e) { var th_is = this; if (e.type == "end") { th_is.longitude = e.detail.centerLocation.longitude; th_is.latitude = e.detail.centerLocation.latitude; th_is.getAddress(th_is.latitude, th_is.longitude); } }, //获取附近位置信息 getAddress(longitude, latitude) { let location = [longitude, latitude] let StringLocation = location.toString(); var th_is = this; qqmapsdk.reverseGeocoder({ location: StringLocation, get_poi: 1, poi_options: 'policy=1;page_size=20;page_index=1', success: res => { th_is.poiss = res.result.pois; th_is.address = res.result.pois.length > 0 ? res.result.pois[0] : {} }, fail: err => { uni.showToast({ title: err.message, icon: 'none', duration: 3000 }) } }) }, radioChange(item, evt) { this.current = evt; this.mapContext.moveToLocation({ latitude: item.location.lat, longitude: item.location.lng }) this.address = Object.assign(item); // console.log(item); }, //确认位置 handleConfirm() { uni.$emit('onAddressChange', this.address); app.globalData.storeMessage = this.address; setTimeout(function() { uni.navigateBack({ delta: 1 }); }, 500) } } } </script> <style scoped lang="scss"> .map-box { padding-bottom: constant(safe-area-inset-bottom); // 底部安全区 padding-bottom: env(safe-area-inset-bottom); // 底部安全区 box-sizing: content-box; } .tui-maps { width: 100%; height: 600rpx; // position: relative; } .cover-image { width: 62rpx; height: 62rpx; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .tip { font-size: 20rpx; color: #b6b6b6; line-height: 42rpx; padding: 0 20rpx; position: absolute; left: 50%; bottom: 30rpx; box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34); background-color: #fff; border-radius: 4px; transform: translateX(-50%); } .gps-body { width: 100%; padding-top: 20rpx; // padding-bottom: 32rpx; // box-sizing: border-box; background-color: #FFFFFF; // position: absolute; // top: 600rpx; // bottom: 0; font-size: 26rpx; .gps-lists { width: 98%; height: 100rpx; margin: 0px auto; border: 1px solid #f9f9f9; .gps-flex { display: flex; justify-content: space-between; } .gps-flex /deep/ .uni-radio-input { width: 40rpx; height: 40rpx; } .gps-title { padding-left: 10rpx; display: block; padding-top: 15rpx; } .gps-view { width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 10rpx; color: #b6b6b6; font-size: 25rpx; margin-top: 15rpx; } } } .but { margin-top: 32rpx; padding: 0 32rpx; } </style>