chelvc-custom/src/pages/client/chooseCity/index copy 3.vue

<template>
  <view class="chooseCity">
    <view class="map">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
    <view class="nearsMap">附近地址</view>
    <view class="city">
      <view class="citeItem1">某某省某某市某某区某某</view>
      <view class="citeItem2">某某省某某市</view>
    </view>
    <view class="city">
      <view class="citeItem1">某某省某某市某某区某某</view>
      <view class="citeItem2">某某省某某市</view>
    </view>
    <view class="city">
      <view class="citeItem1">某某省某某市某某区某某</view>
      <view class="citeItem2">某某省某某市</view>
    </view>
    <view class="city">
      <view class="citeItem1">某某省某某市某某区某某</view>
      <view class="citeItem2">某某省某某市</view>
    </view>
  </view>
</template>

<script>
import { getHomePage } from '@/api/home';
export default {
  data() {
		return {
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 0,
			longitude: 0,
			covers: [{
				latitude: 0,
				longitude: 0,
				iconPath: '../../../static/location.png'
			}, {
				latitude: 0,
				longitude: 0,
				iconPath: '../../../static/location.png'
			}]
		}
	},
	methods: {
    onShow() {
      uni.getLocation({
        type: 'gcj02',
        success: res => {
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
          this.location.longitude = res.longitude;
          this.location.latitude = res.latitude;
          this.$store.commit('SET_LOCATION', { longitude: res.longitude, latitude: res.latitude });
          getHomePage(this.location)
            .then(res => {
              console.log(res);
            })
            .catch(err => {
              console.log(err);
            });
        },
      });
    },
	}
}
</script>

<style lang="scss" scoped>
.chooseCity {
  background-color: #fff;

  .map {
    width: 100%;
    height: 600rpx;
    text-align: center;
    line-height: 600rpx;
  }

  .nearsMap {
    font-size: 36rpx;
    padding: 30rpx;
    border-bottom: 2rpx solid #d9d9d9;
  }

  .city {
    width: 100%;
    height: 150rpx;
    padding: 30rpx;
    box-sizing: border-box;

    .citeItem1 {
      font-size: 34rpx;
      color: #343434;
      margin-bottom: 20rpx;
    }

    .citeItem2 {
      font-size: 26rpx;
      color: #999999;
    }
  }

  .city:nth-of-type(2n) {
    background-color: #efefef;
  }
}
</style>