hlm_pl_mall_h5/pages/home/goodsdetail/ChainList.vue

<!-- List.vue -->
<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<home-base :show="false" ><view class="div wrapper" :style="'width:'+getBannerStyle.width+'px;height:'+getBannerStyle.height+'px'">
		<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>
    <map v-if="loaded>=2" class="div common-popup-content" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
	</view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import { getChainList } from '../../../api/homegoodsdetail'
import { convertPoint } from '../../../util/bmap'
import { env } from '../../../static/config'
export default {
  computed:{
  fontSize(){
    return getFontSize()
  },
      getBannerStyle: function () {
        const res = uni.getSystemInfoSync()
        var width = res.windowWidth
        var height = res.windowHeight
        let itemWidth = width
        let itemHeight = height
        return {
          width: itemWidth,
          height: itemHeight
        }
      },
  },
  data(){
    return {
      loaded:0,
      navHeight: 0,
      goods_id: 0,
      latitude:0,
      longitude:0,
      covers:[]
    }
  },
  components:{
    TitleHeader,
    HomeBase,
  },
  props: ['list'],

  onLoad: function (option) {
    this.goods_id=option.goods_id
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    uni.getLocation({
        type: 'gcj02',
        success: (res) => {
            this.longitude=res.longitude
            this.latitude=res.latitude
            this.loaded++
        }
    })
      getChainList({ goods_id: this.goods_id }).then(res => {
        let chain_list = res.result.chain_list
        for (var i in chain_list) {
          this.mapAddMarker(chain_list[i])
        }
            this.loaded++
      })
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    mapAddMarker (info) {
      var marker = {
        id:info.chain_id,
        width: 35,
        height: 25,
        latitude:info.chain_latitude,
        longitude:info.chain_longitude,
        title:info.chain_addressname,
        iconPath: '/static/image/marker_red_sprite.png',
      }
      this.covers.push(marker) // 将标注添加到地图中
    }
  }
}
</script>

<style lang="scss">
	.common-header-wrap .common-header{box-shadow: unset}
  .common-popup-content{width:100%}
  .wrapper{display: flex;flex-direction: column;}
</style>