地图位置获取重新修改

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>