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/registerUser.vue | 40 +++-
static/WSCoordinate.js | 166 +++++++++++++++++++++++
pages/registerUser/map.vue | 200 ++++++++++++++++++++++++----
3 files changed, 365 insertions(+), 41 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>
diff --git a/pages/registerUser/registerUser.vue b/pages/registerUser/registerUser.vue
index 0ba084c..3fed9b6 100644
--- a/pages/registerUser/registerUser.vue
+++ b/pages/registerUser/registerUser.vue
@@ -29,14 +29,21 @@
<u-form-item v-show="jobValue == '有'" label="工作地点" prop="xq" left-icon="map-fill" label-width="200"
:required="true">
- <u-input v-model="form.xq" type="select" placeholder="请选择工作地点" :border="true"
- @click="regionClick()" />
+ <u-field :disabled="true" style="width: 100%;" label-width="0" v-model="form.xq" type="textarea"
+ placeholder="请选择工作地点" :fixed="true">
+ <u-icon @click="regionClick" name="map-fill" slot="right" size="44" label="定位" label-pos="bottom"
+ label-color="#103289" color="#103289"></u-icon>
+ </u-field>
</u-form-item>
<u-form-item label="居住地" prop="address" left-icon="map" label-width="200" :required="true">
- <u-input v-model="form.address" type="select" placeholder="请选择居住地" :border="true"
- @click="placeClick()" />
+ <u-field :disabled="true" style="width: 100%;" label-width="0" v-model="form.address" type="textarea"
+ placeholder="请选择居住地" :fixed="true">
+ <u-icon @click="placeClick" name="map-fill" slot="right" size="44" label="定位" label-pos="bottom"
+ label-color="#103289" color="#103289"></u-icon>
+ </u-field>
</u-form-item>
+
<u-form-item label="性别" label-width="200" left-icon="man">
<u-radio-group v-model="form.sex">
<u-radio v-for="(item, index) in sex" :key="index" :name="item.name" :disabled="item.disabled">
@@ -98,6 +105,13 @@
};
return {
+ // 工作地点经纬度
+ jobLng: '',
+ jobLat: '',
+ // 居住地经纬度
+ liveLng: '',
+ liveLat: '',
+
userConsent: false,
jobValue: '无',
jobList: [{
@@ -226,7 +240,6 @@
trigger: ['change', 'blur'],
}, {
validator: (rule, value, callback) => {
- console.log(this.form.pass, value)
if (this.form.pass == value) {
return true
} else {
@@ -331,14 +344,15 @@
//监听事件
uni.$on('getLocation', (res) => {
that.form.xq = res.mapLocationName
- this.form.workjurisdiction = res.regionID
+ that.form.workjurisdiction = res.regionID
+ that.jobLng = res.mapLocationLongitude
+ that.jobLat = res.mapLocationLatitude
//清除监听，不清除会消耗资源
uni.$off('getLocation');
-
})
uni.navigateTo({
- url: '/pages/registerUser/map'
+ url: '/pages/registerUser/map?lng=' + that.jobLng + '&lat=' + that.jobLat,
});
},
placeClick() {
@@ -347,14 +361,16 @@
//监听事件
uni.$on('getLocation', (res) => {
that.form.address = res.mapLocationName
- this.form.jurisdiction = res.regionID
+ that.form.jurisdiction = res.regionID
+ that.liveLng = res.mapLocationLongitude
+ that.liveLat = res.mapLocationLatitude
//清除监听，不清除会消耗资源
uni.$off('getLocation');
-
})
uni.navigateTo({
- url: '/pages/registerUser/map'
+ // url: '/pages/registerUser/map'
+ url: '/pages/registerUser/map?lng=' + that.liveLng + '&lat=' + that.liveLat
});
},
zc() {
@@ -435,7 +451,6 @@
method: 'POST',
data: data,
success: (result) => {
- console.log(result, 456)
uni.showToast({
title: '注册成功，请等待审核',
icon: 'none',
@@ -468,7 +483,6 @@
},
watch: {
faceState() {
- // console.log(this.faceState);
if (this.faceState == -1) {
this.facebc = '#ff7f29';
this.faceco = '#fff';
diff --git a/static/WSCoordinate.js b/static/WSCoordinate.js
new file mode 100644
index 0000000..f5cc7db
--- /dev/null
+++ b/static/WSCoordinate.js
@@ -0,0 +1,166 @@
+/**
+ * 判断经纬度是否超出中国境内
+ */
+function isLocationOutOfChina(latitude, longitude) {
+ if (longitude < 72.004 || longitude > 137.8347 || latitude < 0.8293 || latitude > 55.8271)
+ return true;
+ return false;
+}
+
+
+/**
+ * 将WGS-84(国际标准)转为GCJ-02(火星坐标):
+ */
+function transformFromWGSToGCJ(latitude, longitude) {
+ var lat = "";
+ var lon = "";
+ var ee = 0.00669342162296594323;
+ var a = 6378245.0;
+ var pi = 3.14159265358979324;
+
+ if (isLocationOutOfChina(latitude, longitude)) {
+ lat = latitude;
+ lon = longitude;
+ } else {
+ var adjustLat = transformLatWithXY(longitude - 105.0, latitude - 35.0);
+ var adjustLon = transformLonWithXY(longitude - 105.0, latitude - 35.0);
+ var radLat = latitude / 180.0 * pi;
+ var magic = Math.sin(radLat);
+ magic = 1 - ee * magic * magic;
+ var sqrtMagic = Math.sqrt(magic);
+ adjustLat = (adjustLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
+ adjustLon = (adjustLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
+ latitude = latitude + adjustLat;
+ longitude = longitude + adjustLon;
+ }
+ return {
+ latitude: latitude,
+ longitude: longitude
+ };
+
+}
+
+/**
+ * 将GCJ-02(火星坐标)转为百度坐标:
+ */
+function transformFromGCJToBaidu(latitude, longitude) {
+ var pi = 3.14159265358979324 * 3000.0 / 180.0;
+
+ var z = Math.sqrt(longitude * longitude + latitude * latitude) + 0.00002 * Math.sin(latitude * pi);
+ var theta = Math.atan2(latitude, longitude) + 0.000003 * Math.cos(longitude * pi);
+ var a_latitude = (z * Math.sin(theta) + 0.006);
+ var a_longitude = (z * Math.cos(theta) + 0.0065);
+
+ return {
+ latitude: a_latitude,
+ longitude: a_longitude
+ };
+}
+
+/**
+ * 将百度坐标转为GCJ-02(火星坐标):
+ */
+function transformFromBaiduToGCJ(latitude, longitude) {
+ var xPi = 3.14159265358979323846264338327950288 * 3000.0 / 180.0;
+
+ var x = longitude - 0.0065;
+ var y = latitude - 0.006;
+ var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * xPi);
+ var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * xPi);
+ var a_latitude = z * Math.sin(theta);
+ var a_longitude = z * Math.cos(theta);
+
+ return {
+ latitude: a_latitude,
+ longitude: a_longitude
+ };
+}
+
+/**
+ * 将GCJ-02(火星坐标)转为WGS-84:
+ */
+function transformFromGCJToWGS(latitude, longitude) {
+ var threshold = 0.00001;
+
+ // The boundary
+ var minLat = latitude - 0.5;
+ var maxLat = latitude + 0.5;
+ var minLng = longitude - 0.5;
+ var maxLng = longitude + 0.5;
+
+ var delta = 1;
+ var maxIteration = 30;
+
+ while (true) {
+ var leftBottom = transformFromWGSToGCJ(minLat, minLng);
+ var rightBottom = transformFromWGSToGCJ(minLat, maxLng);
+ var leftUp = transformFromWGSToGCJ(maxLat, minLng);
+ var midPoint = transformFromWGSToGCJ((minLat + maxLat) / 2, (minLng + maxLng) / 2);
+ delta = Math.abs(midPoint.latitude - latitude) + Math.abs(midPoint.longitude - longitude);
+
+ if (maxIteration-- <= 0 || delta <= threshold) {
+ return {
+ latitude: (minLat + maxLat) / 2,
+ longitude: (minLng + maxLng) / 2
+ };
+ }
+
+ if (isContains({
+ latitude: latitude,
+ longitude: longitude
+ }, leftBottom, midPoint)) {
+ maxLat = (minLat + maxLat) / 2;
+ maxLng = (minLng + maxLng) / 2;
+ } else if (isContains({
+ latitude: latitude,
+ longitude: longitude
+ }, rightBottom, midPoint)) {
+ maxLat = (minLat + maxLat) / 2;
+ minLng = (minLng + maxLng) / 2;
+ } else if (isContains({
+ latitude: latitude,
+ longitude: longitude
+ }, leftUp, midPoint)) {
+ minLat = (minLat + maxLat) / 2;
+ maxLng = (minLng + maxLng) / 2;
+ } else {
+ minLat = (minLat + maxLat) / 2;
+ minLng = (minLng + maxLng) / 2;
+ }
+ }
+
+}
+
+function isContains(point, p1, p2) {
+ return (point.latitude >= Math.min(p1.latitude, p2.latitude) && point.latitude <= Math.max(p1.latitude, p2
+ .latitude)) && (point.longitude >= Math.min(p1.longitude, p2.longitude) && point.longitude <= Math.max(p1
+ .longitude, p2.longitude));
+}
+
+function transformLatWithXY(x, y) {
+ var pi = 3.14159265358979324;
+ var lat = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+ lat += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+ lat += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
+ lat += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
+ return lat;
+}
+
+function transformLonWithXY(x, y) {
+ var pi = 3.14159265358979324;
+ var lon = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+ lon += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+ lon += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
+ lon += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
+ return lon;
+}
+
+
+
+module.exports = {
+ isLocationOutOfChina: isLocationOutOfChina,
+ transformFromWGSToGCJ: transformFromWGSToGCJ,
+ transformFromGCJToBaidu: transformFromGCJToBaidu,
+ transformFromBaiduToGCJ: transformFromBaiduToGCJ,
+ transformFromGCJToWGS: transformFromGCJToWGS
+}
--
Gitblit v1.9.3