From 0af472703f8ffc5b548b6ed2f337f72b844b888e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 28 Feb 2022 16:03:24 +0800
Subject: [PATCH] 地图位置获取重新修改
---
pages/registerUser/map.vue | 200 +++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 172 insertions(+), 28 deletions(-)
diff --git a/pages/registerUser/map.vue b/pages/registerUser/map.vue
index a02591f..34841cf 100644
--- a/pages/registerUser/map.vue
+++ b/pages/registerUser/map.vue
@@ -3,23 +3,45 @@
<u-navbar height="44" :is-back="false" title="获取地址" title-color="#fff" :background="{background: '#103289'}">
<u-button class="slot-wrap" type="primary" size="mini" @click="returnPage">确定</u-button>
</u-navbar>
- <map id="SignLocationMap"
- style="position: absolute; left: 0; width: 100%; z-index: 99;"
- :style="{height: screenHeight + 'px'}"
- @regionchange="regionChange" :latitude="latitude" :longitude="longitude" :scale="scale">
+
+ <map id="SignLocationMap" style="position: absolute; left: 0; width: 100%; z-index: 99;"
+ :style="{height: screenHeight + 'px'}" @regionchange="regionChange" :latitude="latitude"
+ :longitude="longitude" :scale="scale">
<cover-view class="dingwBut">
<cover-image class="location-log" src="../../static/img/location.png">
</cover-image>
</cover-view>
+
</map>
+
+ <scroll-view id="LocationListBox" class="location-list-box" scroll-y="true">
+ <u-loading color="#103289" class="load" :show="loadShow" size="54"></u-loading>
+ <view class="location-list-item" v-for="(item, index) in locationList" :key="index"
+ v-show="locationList.length > 0"
+ @click="selectLocation(item)">
+ <view class="item-box">
+ <view class="item-name">{{item.name}}</view>
+ <view class="item-address">{{item.address}}</view>
+ </view>
+ <view class="slection-icon">
+ <u-icon :name="item.iconName" color="#103289" size="44"></u-icon>
+ </view>
+ </view>
+ </scroll-view>
</view>
</template>
<script>
+ import util from "../../static/WSCoordinate.js"
+
export default {
data() {
return {
+ loadShow: true,
+ // 位置列表
+ locationList: [],
+
screenHeight: 0,
mapLocationName: '',
mapLocationLatitude: '',
@@ -27,23 +49,72 @@
regionID: '',
- latitude: 28.678983439095823,
longitude: 115.84414205551147,
- scale: 15 //缩放级别
+ latitude: 28.678983439095823,
+ scale: 18 //缩放级别
+ }
+ },
+ onLoad(options) {
+ var that = this
+ if (options.lng != '' && options.lat != '') {
+ that.longitude = Number(options.lng)
+ that.latitude = Number(options.lat)
+ } else {
+ uni.getLocation({
+ type: 'gcj02',
+ isHighAccuracy: true,
+ success: function(res) {
+ that.longitude = Number(res.longitude)
+ that.latitude = Number(res.latitude)
+ }
+ });
}
},
onReady() {
var that = this
-
+
uni.getSystemInfo({
- success: function(res) {
- console.log(res, 465)
- that.screenHeight = res.windowHeight - 44
+ success(res) {
+ let {
+ windowWidth,
+ windowHeight,
+ safeArea
+ } = res;
+ const query = uni.createSelectorQuery().in(that);
+
+ query
+ .select('#LocationListBox')
+ .boundingClientRect(data => {
+
+ that.screenHeight = (safeArea.bottom - safeArea.top - data.height - 44);
+
+ })
+
+ .exec();
}
- })
+ });
+
},
methods: {
+ // 选择位置
+ selectLocation(param) {
+ this.locationList.forEach((item) => {
+ item.iconName = ''
+ })
+ param.iconName = 'checkbox-mark'
+
+ this.parentPageParam(param)
+ },
+
+ parentPageParam(param) {
+ this.mapLocationName = param.address
+ this.mapLocationLongitude = param.point.longitude
+ this.mapLocationLatitude = param.point.latitude
+ },
+
regionChange() { // 移动地图后重新获取门店
+ this.loadShow = true
+ this.locationList = []
var that = this
uni.createMapContext('SignLocationMap', this).getCenterLocation({
success: res => {
@@ -61,32 +132,56 @@
getLocationInfor(longitude, latitude) {
var that = this
var point = new plus.maps.Point(longitude, latitude);
- plus.maps.Map.reverseGeocode(
- point, {},
- function(event) {
- var address = event.address; // 转换后的地理位置
- var point = event.coord; // 转换后的坐标信息
- var coordType = event.coordType; // 转换后的坐标系类型
+ var map = plus.maps.getMapById('SignLocationMap');
+ var searchObj = new plus.maps.Search(map);
-
- that.mapLocationName = address
- that.mapLocationLongitude = point.longitude
- that.mapLocationLatitude = point.latitude
-
- },
- function(e) {}
- );
+ searchObj.onPoiSearchComplete = function(state, result) {
+ if (state == 0) {
+ if (result.currentNumber <= 0) {
+ that.locationList = []
+ } else {
+ result.poiList.forEach((item) => {
+ item.iconName = ''
+ })
+ result.poiList[0].iconName = 'checkbox-mark'
+ that.parentPageParam(result.poiList[0])
+ that.locationList = result.poiList
+ that.loadShow = false
+ that.getRegionId()
+ }
+ } else {
+ alert("检索失败");
+ }
+ }
+ searchObj.poiSearchNearBy(' ', point, 1000)
},
-
+
returnPage() {
- console.log(1)
var that = this
uni.$emit('getLocation', {
mapLocationName: that.mapLocationName,
- regionID: that.regionID
+ regionID: that.regionID,
+ mapLocationLongitude: that.mapLocationLongitude,
+ mapLocationLatitude: that.mapLocationLatitude
});
//关闭当前窗口
uni.navigateBack({});
+ },
+
+ getRegionId() {
+ var that = this
+ var position = util.transformFromGCJToWGS(that.mapLocationLatitude, that.mapLocationLongitude)
+ uni.request({
+ url: that.$store.state.piAPI + '/jurisdiction/isOnArea',
+ method: 'get',
+ data: {
+ jd: position.longitude,
+ wd: position.latitude
+ },
+ success: (res) => {
+ that.regionID = res.data.data[0].id
+ }
+ });
}
},
@@ -129,4 +224,53 @@
transform: translateY(-22px);
}
+ .location-list-box {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+
+ width: 100%;
+ height: 40%;
+
+ border-radius: 5px;
+ z-index: 99999;
+
+ .load {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ }
+
+ .location-list-item {
+ display: flex;
+ padding: 4px 6px;
+ height: 60px;
+ align-items: center;
+
+ .item-box {
+ padding: 0 4px;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+
+ .item-name {
+ font-size: 14px;
+ flex: 1;
+ }
+
+ .item-address {
+ height: 20px;
+ font-size: 0.675rem;
+ color: #bebebe !important;
+ }
+ }
+
+ .slection-icon {
+ width: 36px;
+ }
+ }
+ }
</style>
--
Gitblit v1.9.3