uniapp h5 地址选择器如何实现

在uniapp开发H5页面时，如何实现一个地址选择器功能？需要支持省市区三级联动选择，并且能够返回用户选择的完整地址信息。是否有现成的组件或插件可以直接使用？如果自己实现的话，大概的思路和关键代码是怎样的？

2 回复

使用uniapp的<map>组件配合地图API实现。可以调用高德或腾讯地图的地址搜索接口，结合uni.chooseLocation()获取位置信息。需要配置manifest.json中的地图权限和key。


在 UniApp 中实现 H5 地址选择器，可以使用第三方组件或自定义实现。以下是两种常用方法：

方法一：使用第三方组件（推荐）

高德地图 Web API 简单高效，步骤如下：

  1. 引入高德地图 JS API
    在 index.html 中添加：

    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图Key"></script>

  2. 创建地址选择页面
    新建 address-picker.vue，核心代码：

    <template>
  <view>
    <input v-model="address" placeholder="选择地址" @focus="openPicker" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: ''
    };
  },
  methods: {
    openPicker() {
      // 调用高德地址选择组件
      AMap.plugin('AMap.Autocomplete', () => {
        new AMap.Autocomplete({
          input: 'picker-input' // 绑定输入框ID
        });
      });
      
      AMap.plugin('AMap.PlaceSearch', () => {
        new AMap.PlaceSearch({
          map: new AMap.Map('map-container') // 地图容器ID
        });
      });
    }
  }
};
</script>

方法二：使用 UniApp 原生能力 + 自定义组件

通过 uni.chooseLocation() 调用设备原生定位（H5 兼容性有限）：

chooseAddress() {
  uni.chooseLocation({
    success: (res) => {
      this.address = res.address;
      console.log('位置名称：' + res.name);
      console.log('详细地址：' + res.address);
    },
    fail: (err) => {
      uni.showToast({ title: '选择失败', icon: 'none' });
    }
  });
}

注意事项：

  1. 高德 Key 申请：需到高德开放平台注册并获取 Web 端 Key。
  2. H5 适配：方法二在部分浏览器可能受限，建议优先用高德 API。
  3. 样式优化：根据需求自定义输入框和地图容器的样式。

完整流程示例（高德方案）：

<template>
  <view class="container">
    <input 
      v-model="keyword" 
      @input="onInput" 
      placeholder="输入地址关键词"
      class="input"
    />
    <scroll-view scroll-y class="list">
      <view 
        v-for="item in tips" 
        :key="item.id"
        @click="selectAddress(item)"
        class="item"
      >
        {{ item.name }}{{ item.district }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      tips: []
    };
  },
  methods: {
    onInput() {
      if (!this.keyword) return;
      // 高德输入提示
      AMap.plugin('AMap.Autocomplete', () => {
        const autoComplete = new AMap.Autocomplete();
        autoComplete.search(this.keyword, (status, result) => {
          if (status === 'complete') {
            this.tips = result.tips;
          }
        });
      });
    },
    selectAddress(item) {
      uni.$emit('addressSelected', item);
      uni.navigateBack();
    }
  }
};
</script>

选择时通过全局事件传递数据，在父页面监听：

uni.$on('addressSelected', (address) => {
  console.log('选中地址:', address);
});

推荐使用高德方案，功能更完善且兼容性更好。记得在项目中合理处理密钥安全。

回到顶部