uniapp输入框+腾讯地图实现搜索功能

（vue3）
https://lbs.qq.com/service/webService/webServiceGuide/search/...

register.vue

<template>
    <uni-forms
      ref="form"
      v-model="formData"
      label-position="top"
    >
      <uni-forms-item
        required
        label="所属医院"
        name="hospital"
        label-width="75px"
      >
        <view style="position: relative">
          <uni-easyinput
            prefixIcon="search"
            @input="onChangeHospital"
            v-model="formData.hospital"
            type="text"
            placeholder="请输入所属医院"
            @focus="onFocus"
          />
          <scroll-view
            @scrolltolower="lowerBottom"
            scroll-y="true"
            class="location-list"
            v-if="locationList.length > 0"
          >
            <uni-list>
              <uni-list-item
                v-for="item in locationList"
                :key="item.id"
                :clickable="true"
                :title="item.title"
                @click.stop="selectLocation(item.title)"
                :note="item.province + '-' + item.city + '-' + item.district"
              />
            </uni-list>
          </scroll-view>
        </view>
      </uni-forms-item>
    </uni-forms>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { appGetCity } from '@/http/app-location';
import { onReady, onShow } from '@dcloudio/uni-app';
// 表单对象
const form = ref();
// 表单数据
const formData = ref<any>({
  hospital: '',
});
// 当前地址请求页码
const curentPageIndex = ref(1);
// 纬度
const latitude = ref<number>(0);
// 经度
const longitude = ref<number>(0);
// 获取经纬度
const getCoordinate = () => {
  uni.getLocation({
    type: 'gcj02',
    isHighAccuracy: true,
    highAccuracyExpireTime: 3001,
    success: (result: UniApp.GetLocationSuccess) => {
      latitude.value = result.latitude;
      longitude.value = result.longitude;
    },
  });
};
onShow(() => {
  getCoordinate();
});
// 当前地址列表
const locationList = ref<Array<any>>([]);
// 是否已经请求完数据了
let isAllData = ref(false);
// 获取当前坐标
const getCity = async (keyValue: string, isScroll?: boolean) => {
  const serverValue = Array<{ data: Array<any> }>(
    await appGetCity(
       //以下key不可用
      'AMBBZ-LVJ37-THVXS-HCLQ5-FJ7NQ-QGBV5',
      keyValue,
      latitude.value,
      longitude.value,
      curentPageIndex.value,
    ),
  );
  //当前请求回来的地址列表数据
  let data = serverValue[0].data;
  //当前滚动触底执行的请求
  if (isScroll) {
    locationList.value = [...locationList.value, ...data];
    if (data.length == 0) {
     //判断是否请求完所有数据
      isAllData.value = true;
    }
  } else {
    locationList.value = data;
  }
};
// 所属医院输入框输入事件
const onChangeHospital = (value: string) => {
  curentPageIndex.value = 1;
  if (value) {
    getCity(value);
  } else {
    locationList.value = [];
  }
};
// 地址列表滚动触底事件
const lowerBottom = () => {
  if (isAllData.value) {
    return;
  }
//当滚动触底，并且未请求完全部数据时
  curentPageIndex.value += 1;
  getCity(formData.value.visitingHospital, true);
};
// 输入框获取焦点时
const onFocus = () => {
  let input_value = formData.value.hospital;
  if (input_value) {
    getCity(input_value);
  }
};
// 选择位置并渲染到就诊医院输入框
const selectLocation = (value: any) => {
  formData.value.hospital = value;
  locationList.value = [];
};
</script>

---

css

<style lang="scss" scoped>
.location-list {
  position: absolute;
  bottom: -320rpx;
  background-color: #fff;
  z-index: 4;
  width: 100%;
  height: 320rpx;
  border-left: 0.4px solid #f1ebeb;
  border-right: 0.4px solid #f1ebeb;
  box-shadow: 0 10px 10px #ccc;
}
</style>

---

http/app-location/index.ts

import type { LocationResult, AppLocation } from '@/types/app-location';
/**
 * 根据经纬度获取城市
 * @param {string} key 腾讯地图key
 * @param {string} keyword 关键词
 * @param {number} latitude 纬度
 * @param {number} longitude 经度
 * @param {number} pageIndex 页码
 * @returns
 */
export const appGetCity = (
  key: string,
  keyword: string,
  latitude: number,
  longitude: number,
  pageIndex: number,
) =>
  new Promise<LocationResult>((resolve) => {
    uni.request({
      url: `https://apis.map.qq.com/ws/place/v1/suggestion?key=${key}&keyword=${keyword}&location=${latitude},${longitude}&page_index=${pageIndex}`,
      data: {},
      header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
      },
      method: 'GET',
      sslVerify: true,
      success: (response: UniApp.RequestSuccessCallbackResult) => {
        const { data } = response;
        resolve(data as AppLocation);
      },
    });
  });