cv-geo-local 带地图选择的地址输入框 ¶

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-geo-local</view>
      <view class="components-title-d">可在地图中选择地址</view>
    </view>
    <view class="components-info">
      <view class="components-info-list" v-if="location_data">
        <view class="components-info-list-title">@onLocation:</view>
        <view class="components-info-list-item">
          <!--  #ifdef  MP-WEIXIN -->
          <view v-for="(item, key) in location_data" :key="key">
            <text>&Prime;{{ key }}&Prime;:</text>
            <text>{{ ' &Prime;' + item + '&Prime;' }}</text>
          </view>
          <!--  #endif -->
          <!--  #ifndef  MP-WEIXIN -->
          <text>{{ location_data }}</text>
          <!--  #endif -->
        </view>
      </view>
      <view class="components-info-list-tip" v-else>
        <view><text>未选择</text></view>
        <view><text>点击输入框右侧搜索按钮选择地址</text></view>
      </view>
    </view>
    <cv-form-base ref="refFormBase" :rules="formRules" :model="formData" style="padding: 0 10px" labelWidth="84">
      <cv-form-item label="详细地址1">
        <cv-geo-local v-model="formData.address1" @location="onLocation" />
      </cv-form-item>
      <cv-form-item label="详细地址2" labelPosition="top">
        <cv-geo-local v-model="formData.address2" @location="onLocation" isShowMap />
        <template v-slot:tip>有地图</template>
      </cv-form-item>
      <cv-form-item label="详细地址3" labelPosition="top">
        <cv-geo-local v-model="formData.address3" @location="onLocation" :location="location" isShowMap />
        <template v-slot:tip>有地图和默认地理位置</template>
      </cv-form-item>
    </cv-form-base>
    <view style="height: 50px"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formRules: {},
      formData: {
        address1: '',
        address2: '',
        address3: ''
      },
      location: {},
      location_data: null
    };
  },
  onLoad() {
    setTimeout(() => {
      this.formData = {
        address1: '福建省福州市仓山区浦上大道198号123132',
        address3: '福建省福州市仓山区浦上大道198号'
      };
      this.location = {
        latitude: '26.040905',
        longitude: '119.279148'
      };
    }, 1000);
  },
  methods: {
    onLocation(e) {
      this.location_data = e;
    }
  }
};
</script>

<style>
.components-info {
  background-color: #ffffff;
  padding: 10px;
}
.components-info-title {
  text-align: center;
  line-height: 40px;
  font-size: 16px;
}
.components-info-list,
.components-info-list-tip {
  margin: 20px 0;
}
.components-info-list-tip {
  text-align: center;
  font-size: 12px;
  color: #99999999;
}
.components-info-list-title {
  font-size: 12px;
  color: #999999;
}
.components-info-list-item {
  font-size: 12px;
  color: #666666;
  padding-left: 40px;
}
</style>