hlm_pl_mall_h5/pages/home/storedetail/Storemap.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 common-no-more" v-if="store && !(store.store_latitude && store.store_longitude)">
            店铺未设置地址
        </view>
        <iframe class="map-content" v-if="getUrl || iframeUrl" :src="iframeUrl"></iframe>
    </view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import { mapState, mapActions } from 'vuex'
import { getPosition,convertPoint } from '../../../util/bmap'
import { getStoreInfo,getStoreMap } from '../../../api/homestoredetail'

export default {
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  data(){
    return {
      navHeight: 0,
      iframeUrl:'',
      store: false,
      store_id: '',
      o_lat: false,
      o_lng: false,
      d_lat: false,
      d_lng: false,
    }
  },
  components:{
    TitleHeader,
    HomeBase,
  },
  onLoad: function (option) {
    this.store_id=option.id ? option.id : ''
    getStoreInfo(
      this.store_id
    ).then((res) => {
      this.store = res.result.store_info
      if(this.store.store_longitude && this.store.store_latitude){
      convertPoint(this.store.store_longitude,this.store.store_latitude).then(result=>{
        if(result.status==0){
          this.d_lat = result.result[0].y
          this.d_lng = result.result[0].x
        }else{
          uni.showToast({icon:'none',title: '坐标转换失败'})
        }
      }).catch(error => {
        console.log(error)
        uni.showToast({icon:'none',title: '调用坐标转换接口失败'})
      })
      }
    }).catch(error => {
      uni.showToast({icon:'none',title: error.message})
    })
    var _this = this
    getPosition(function (res) {
      if (res.code === 10000) {
        _this.o_lat = res.result.lat
        _this.o_lng = res.result.lng
      } else {
        uni.showToast({icon:'none',title: res.message})
      }
    }, true)
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    getUrl: function () {
      if (this.d_lat && this.d_lng && this.o_lat && this.o_lng) {
        getStoreMap({region:this.store.area_info,o_lng:this.o_lng,o_lat:this.o_lat,o_name:'我',d_lng:this.d_lng,d_lat:this.d_lat,d_name:this.store.store_name}).then(res=>{

          this.iframeUrl = res.result.url
          console.log(this.iframeUrl)
        }).catch(error=>{
          uni.showToast({icon:'none',title: error.message})
        })
      }
    }
  },
  methods:{

  goBack(){uni.navigateBack({delta:1})},

  }

}
</script>

<style scoped lang="scss">
.map-content{position: absolute;padding-top:2rem;width:100%;height:100%;top:0;box-sizing: border-box;border: 0}
</style>