ks-app-employment-service/packageRc/components/placePicker.vue

<template>
  <view>
    <u-popup :show="visible">
      <view style="position: relative;height: 100vh;width: 100%;">
        <view class="button-area" style="padding: 8vh 32rpx 24rpx 32rpx; margin: 0;border: 0;position: relative;z-index: 2;display: block; top: 10rpx; border-radius: 0;">
          <u-input style="margin-bottom: 16px;" v-model="placeInput" @change="getLocations" placeholder="请输入并选择相应地点"></u-input>
          <view v-if="checkedMarker&&checkedMarker.name" class="selected">您已选择：{{ checkedMarker.name }}<text v-if="checkedMarker.address">（{{ checkedMarker.address }}）</text></view>
          <view v-for="(item, index) in placeList" :key="index" :label="item.name" :value="item.name" @click="addIcon(item.name)" class="place-list">
            <view style="display: flex;justify-content: space-between;">{{ item.name }}
              <view style="color: #8492a6; font-size: 13px;width: 50%">{{ item.address }}</view>
            </view>
          </view>
        </view>
        <view class="map" id="map"></view>
        <view class="button-area">
          <view class="btn" @click="cancel">取 消</view>
          <view class="btn save" @click="submitForm">确 定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
//import { jsonp } from "vue-jsonp";
export default {
  data() {
    return {
      map: '',
      placeList: [],
      placeInput: '',
      markerList: [],
      checkedMarker: '',
      visible: false,
    }
  },
  mounted() {
    // this.openDialog();
  },
  methods: {
    submitForm() {
      if(this.checkedMarker&&this.checkedMarker.name){
        this.$emit('selected', this.checkedMarker)
        this.visible = false;
      }else{
        this.$message.warning('您尚未选择地点！')
      }
    },
    cancel() {
      this.visible = false;
      if (this.map) {
    this.map.removeEventListener('click', this.handleMapClick);
  }
    },
    openDialog() {
      this.visible = true;
      this.$nextTick(() => {
        this.map = new BMapGL.Map("map");
        var point = new BMapGL.Point(117.123237,36.657017);
        this.map.centerAndZoom(point, 15);
        this.map.enableScrollWheelZoom();
        var locationCtrl = new BMapGL.LocationControl();
        this.map.addControl(locationCtrl)
        this.map.addEventListener('click', this.handleMapClick);
      })
    },
    handleMapClick(e) {
  const lng = e.latlng.lng;
  const lat = e.latlng.lat;
  // 逆地理编码
  jsonp("https://api.map.baidu.com/reverse_geocoding/v3/", {
    ak: "qr93Dm5Ph6Vb4n1aTfvHG9KZkvG8S4YU",
    output: "json",
    location: `${lat},${lng}`,
  }).then(res => {
    if (res.status === 0) {
      // 清除原有标记
      this.removeOverlay();
      // 新建标记
      const point = new BMapGL.Point(lng, lat);
      const marker = new BMapGL.Marker(point);
      this.map.addOverlay(marker);
      this.markerList = [marker];
      // 保存选中信息
      this.checkedMarker = {
        name: res.result.formatted_address,
        address: res.result.sematic_description,
        location: { lng, lat }
      };
      this.$forceUpdate();
    }
  });
},
    getLocations(place) {
      jsonp("https://api.map.baidu.com/place/v2/suggestion", {
        q: place,
        ak: "qr93Dm5Ph6Vb4n1aTfvHG9KZkvG8S4YU",
        region: '济南市',
        output: "json",
      })
        .then((json) => {
          console.log(json,23423434)
          this.placeList = json.result
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addIcon(e) {
      let arr = this.placeList.filter(ele => ele.name == e)
      if(arr.length){
        this.addMaker(arr)
        this.clickMaker(arr[0]);
      }else{
        this.addMaker(JSON.parse(JSON.stringify(this.placeList)))
      }
      this.placeList = []
    },
    removeOverlay() {
      this.markerList.forEach(ele => {
        this.map.removeOverlay(ele)
      })
    },
    addMaker(list) {
      this.removeOverlay()
      list.forEach((ele, index) => {
        let point = new BMapGL.Point(ele.location.lng, ele.location.lat);
        if(index == 0){
          this.map.centerAndZoom(point, 15)
        }
        let marker = new BMapGL.Marker(point);        // 创建标注
        this.map.addOverlay(marker);
        let that = this;
        this.markerList.push(marker)
        marker.addEventListener("click", function(){
          that.clickMaker(ele)
        });
      })
    },
    clickMaker(e){
      this.checkedMarker = e;
      this.$forceUpdate();
    }
  }
}
</script>

<style lang="scss" scoped>

.selected {
  margin-bottom: 16px;
  position: relative;z-index: 2;
  background: #DCE2E9;
  border-radius: 8rpx;
  padding: 12rpx 24rpx;
}
.map{
  width: 100%;
  margin-top: 16px;
  height: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}

.button-area{
  position: absolute;
  z-index: 2;
  bottom: 0;
  padding: 24rpx 32rpx 68rpx;
  width: 100%;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  margin-top: 40rpx;
  border-radius: 16px 16px 0px 0px;
  .btn{
    line-height: 72rpx;
    width: 176rpx;
    margin-right: 16rpx;
    font-size: 28rpx;
    border: 1px solid #B8C5D4;
    color: #282828;
    text-align: center;
    border-radius: 8rpx;
  }
  .reset{
    background: #DCE2E9;
  }
  .save{
    background: linear-gradient(103deg, #1D64CF 0%, #1590D4 99%);
    color: #fff;
    border: 0;
    flex-grow: 1;
  }
}
.place-list{
  line-height: 32rpx;
  padding: 16rpx 0;
  border-bottom: 1px solid #DCE2E9;
}
</style>