uniapp map组件，如何完成关键字搜索地址功能？

Question

uniapp map组件，如何完成关键字搜索地址功能？
给个思路或者有现成的demo参考一下。
跪谢！！！

Answer 1

uniapp+vue3+ts

// 维度
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;
    },
  });
};
// 输入框输入事件
const onChangeHospital = (value: string) => {
  if (value) {
    getCity(value);
  } 
};
let baseMapKey=ref();//地图key
// 获取当前坐标
const getCity = async (keyValue: string) => {
  const serverValue = Array<{ data: Array<any> }>(
    await appGetCity(
      baseMapKey.value,
      keyValue,
      latitude.value,
      longitude.value
    ),
  );
//获取的地址列表
  let locationList = serverValue[0].data;
};

utils.js

/**
 * 根据经纬度获取城市
 * @param {string} key 腾讯地图key
 * @param {string} keyword 关键词
 * @param {number} latitude 纬度
 * @param {number} longitude 经度
 * @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);
      },
    });
  });