hlm_pl_mall_h5/pages/home/map/Map.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <home-base :show="false"><view class="div">
    <view class="div common-header-wrap">
      <view :style="'height:'+navHeight+'px'"></view>
      <view class="common-header-holder"></view>
      <view class="common-header-fixed">
      <title-header />
      <uni-nav-bar title="定位" class="common-header" left-icon="back" @clickLeft="goBack()">
      </uni-nav-bar>
      </view>
      </view>
      <view class="div map-wrapper">
        <map-select ref="map_select" :longitude="lng" :latitude="lat" :ifShowCurrent="true" @setPosition="setPosition"></map-select>
      </view>
    </view>
  </home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import MapSelect from '../../MapSelect'
import { mapState, mapMutations } from 'vuex'
import { getAddressByPoint, getPosition, getPointByIp } from '../../../util/bmap'
export default {
  name:'HomeMap',
  data(){
    return {
      navHeight: 0,
      lng: 0,
      lat: 0
    }
  },
  components:{
    TitleHeader,
    HomeBase,
    MapSelect
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  created: function () {

      let _this = this
      getPosition(function (res) {
        if (res.code === 10000) {
          _this.lat = res.result.lat
          _this.lng = res.result.lng
          _this.getAddressByPoint()
        } else {
          // uni.showToast({icon:'none',title: res.message})
          // 使用ip定位
          getPointByIp().then(res => {
            if (res.status == 0) {
              _this.lat = res.content.point.y
              _this.lng = res.content.point.x
              _this.getAddressByPoint()
            } else {
              uni.showToast({icon:'none',title: res.message})
            }
          }).catch(function (error) {
            uni.showToast({icon:'none',title: error.message})
          })
        }
      }, true)

  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      member_point: state => state.member.point
    })
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    ...mapMutations({
      memberPoint: 'memberPoint'
    }),
    getAddressByPoint () {
      getAddressByPoint(this.lat + ',' + this.lng).then(res => {
        if (res.status == 0) {
          this.memberPoint({ point: { lng: this.lng, lat: this.lat, address: res.result.sematic_description, cityCode: res.result.cityCode } })
        } else {
          uni.showToast({icon:'none',title: res.message})
        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    setPosition (lat, lng, name, cityCode) {
      this.memberPoint({ point: { lng: lng, lat: lat, address: name, cityCode: cityCode } })
      uni.navigateBack({delta:1})
    }
  }
}
</script>

<style scoped lang="scss">
.map-wrapper{position:absolute;top:$headerHeight;bottom:0;width:100%}
</style>