更新记录

1.0.3（2023-12-19）

样式调整

1.0.2（2023-12-19）

样式调整

1.0.1（2023-12-19）

优化

平台兼容性

hr-location-picker

组件名：hr-location-picker

代码块：uMapPicker

点击下载 & 安装

hr-location-picker 组件是一个用于选取地址和定位的组件。它允许用户在地图上选择一个位置，并获取该位置的地址和坐标信息。这个组件特别适合于需要地理位置服务的应用场景。

介绍

hr-location-picker 组件提供了一个交互式的地图界面，用户可以通过点击地图上的位置来选取地址。该组件还提供了获取当前位置的功能，方便用户快速定位并选择当前所在位置。

注意事项

• 确保已正确集成地图服务的 SDK，如高德地图或腾讯地图。
• 请确保正确配置了地图的 API Key 和必要的权限。
• 在使用组件之前，务必获取用户的位置权限。

基本用法

<template>
  <view class="map-picker-wrap">
    <hr-location-picker v-model="locationInifo" />
  </view>
</template>

<script setup>
import { ref }  from 'vue';

const locationInifo=ref({});
</script>

功能介绍

• 地址选取：用户可以在地图上选择任意位置作为地址。
• 获取当前位置：组件能够获取用户的当前位置，并显示在地图上。
• 反地理编码：将选择的位置坐标转换为具体的地址信息。

API

hr-location-picker Props

hr-location-picker Events

示例

<template>
  <view class="issues-wrap">
    <view class="inner">
      <uni-forms
        ref="issuesFormRef"
        :model="state.issuesData"
        label-position="top"
        label-width="200"
        :rules="state.rules"
        validate-trigger="blur"
      >
        <uni-forms-item
          required
          label-position="left"
          label="问题地址"
          name="address"
        >
          <hr-location-picker
            v-model:address="state.issuesData.address"
            v-model:location="state.issuesData.coordinate"
          />
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="submit">提交</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";

const issuesFormRef = ref(null);

const state = reactive({
  issuesData: {
    address: ""
  },
  rules: {
    address: {
      rules: [
        {
          required: true,
          errorMessage: "请选择问题地址",
        },
      ],
    },
  },
});

const submit = () => {
  issuesFormRef.value
    .validate()
    .then((res) => {
      console.log("请求数据", res);
    })
    .catch(() => {
      console.log("表单错误信息：", err);
    });
};
</script>