hlm_pl_mall_h5/pages/MapSelect.vue

<template>
  <view class="div common-map-select">
    <view class="div search-wrap"><text class="i iconfont" @click="searchAddress">&#xe6cb;</text><input type="text" v-model="keyword"><view @click="searchAddress" class="div btn">搜索</view></view>
    <view class="div result-list" >
      <view class="div" :class="{'current':style}" v-if="member_point && style && ifShowCurrent">
        <text class="span notice">当前地址<text class="span reset" @click="getPosition"><text class="i iconfont">&#xe6d3;</text>重新定位</text></text>
        <view class="div">
          <view class="div result-item" style="border-bottom:0" @click="setPosition(member_point.lat,member_point.lng,member_point.address)">{{member_point.address}}</view>
        </view>
      </view>
      <view class="div" :class="{'nearby':style}">
        <text class="span notice">附近地址</text>
        <view class="div" v-for="(item,index) in address_list" :key="index">
          <view class="div result-item" v-if="item.location" @click="setPosition(item.location.lat,item.location.lng,item.name)">{{item.name}}</view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import { getAddressByKeyword, getAddressByPoint, getPointNearby, getPosition } from '../util/bmap'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'MapSelect',
  data () {
    return {
      keyword: '',
      address_list: [],
      // wrapperHeight: 0,
      bmap: false,
      myMarker: false,
      cityCode: 0,
      style: false
    }
  },
  props: {
    longitude: {},
    latitude: {},
    ifShowCurrent:{
    type:Boolean,
    default:false
    },
  },
  watch: {
    longitude: function (newLongitude, oldLongitude) {
      if (newLongitude) {
        this.creatMap()
      }
    }
  },
  computed: {
    ...mapState({
      member_point: state => state.member.point
    })
  },
  mounted () {
  },
  created () {
    if (this.longitude) {
      this.creatMap()
    }
  },
  methods: {
    ...mapMutations({
      memberPoint: 'memberPoint'
    }),
    getPosition () {
      let _this = this
      uni.showLoading({ title: '加载中' })
      getPosition(function (res) {
        uni.hideLoading()
        if (res.code === 10000) {
          _this.getAddressByPoint(res.result.lat, res.result.lng)
        } else {
          uni.showToast({icon:'none',title: res.message})
        }
      }, true)
    },
    getAddressByPoint (lat, lng) {
      getAddressByPoint(lat + ',' + lng).then(res => {
        this.cityCode = res.result.cityCode
        this.memberPoint({ point: { lng: lng, lat: lat, address: res.result.sematic_description, cityCode: res.result.cityCode } })
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    creatMap () {
      this.getAddressByPoint(this.latitude, this.longitude)
      // 附近地址
      getPointNearby(this.latitude + ',' + this.longitude).then(res => {
        this.address_list = res.results
        this.style = true
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
      // let point = new BMap.Point(this.longitude, this.latitude)
      // 创建点坐标
      // this.bmap.centerAndZoom(point, 16)
      // this.myMarker = new BMap.Marker(point)
      // this.bmap.addOverlay(this.myMarker)
    },
    searchAddress () {
      getAddressByKeyword(this.keyword, this.cityCode).then(res => {
        this.address_list = res.result
        this.style = false
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    setPosition (lat, lng, name) {
      this.$emit('setPosition', lat, lng, name, this.cityCode)
    }
  }
}
</script>
<style  lang="scss" scoped>
  .common-map-select{background: #fff;position: absolute;width:100%;height:100%;
    .search-wrap{height: 2rem;line-height: 2rem;position: relative;position: absolute;left:.5rem;top:$pageSpace;right:$pageSpace;background: #F5F5F5;display: flex;border-radius:.4rem;overflow: hidden;
      input{width: 100%;height: 2rem;line-height: 2rem;font-size:$h2;display: block;background: none;border: 0;flex:1}
      .i{font-size:$h1;line-height: 2rem;display: block;width:2rem;text-align: center}
      .btn{background: $primaryColor;color:#fff;font-size:$subFontSize;padding:0 .5rem;}
    }
    .result-list{overflow-y:auto;position: absolute;top:3rem;bottom:0rem;width:100%;
      .notice{display: none;padding:1rem $pageSpace 0 $pageSpace;font-size:$subFontSize;color:#aeaeae;line-height: 1.5}
      .reset{float: right;color:$primaryColor}
      .current .notice,.nearby .notice{display: block}
      .current{box-shadow: 0px 4px 4px #f7f7f7;}
      .result-item{padding:.7rem 0;font-size:$h2;color:#333;border-bottom: 1px dashed #eee;margin:0 $pageSpace;}
    }
  }
</style>