地图位置获取重新修改

shuishen

2022-02-28 0af472703f8ffc5b548b6ed2f337f72b844b888e

地图位置获取重新修改

 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>

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

 static/WSCoordinate.js

New file
@@ -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
}