vue使用腾讯地图点击input框获取地址列表

要实现这个功能，你需要使用腾讯地图提供的JavaScript API，并且结合Vue框架的响应式数据更新机制，实现点击输入框后异步获取地址列表并显示在下拉框中。

以下是一个简单的实现过程：

1. 在Vue组件的mounted生命周期中，使用腾讯地图API加载地图，并创建一个Autocomplete组件用于输入框自动完成搜索。

mounted() {
  // 加载地图
  const map = new qq.maps.Map(document.getElementById("map"), {
    center: new qq.maps.LatLng(39.916527, 116.397128),
    zoom: 13
  });
  // 创建Autocomplete组件
  const autoComplete = new qq.maps.Autocomplete(
    document.getElementById("search-input")
  );
}

2. 监听Autocomplete组件的placechanged事件，当用户选择了一个地址时，触发回调函数，将选中的地址保存在Vue组件的data中，并显示在输入框中。

// 监听Autocomplete组件的placechanged事件
qq.maps.event.addListener(autoComplete, "place_changed", function() {
  // 获取选中的地址数据
  const place = autoComplete.getPlace();
  // 更新Vue组件的data
  this.address = {
    name: place.name,
    location: {
      lat: place.geometry.location.lat(),
      lng: place.geometry.location.lng()
    }
  };
});

3. 根据用户输入的关键字，使用腾讯地图API的搜索服务，异步获取相关地址列表，并保存在Vue组件的data中，用于显示在下拉框中。

// 监听输入框的input事件
onInput(event) {
  const keyword = event.target.value;
  // 使用腾讯地图API的搜索服务，异步获取相关地址列表
  const searchService = new qq.maps.SearchService({
    location: "北京市",
    complete: results => {
      // 将搜索结果保存在Vue组件的data中
      this.addressList = results.map(result => ({
        name: result.name,
        location: {
          lat: result.location.lat,
          lng: result.location.lng
        }
      }));
    }
  });
  searchService.search(keyword);
}

4. 在模板中，使用v-model指令绑定输入框的值，使用v-for指令循环渲染地址列表。

<template>
  <div>
    <input id="search-input" type="text" v-model="keyword" @input="onInput" />
    <ul v-if="addressList.length">
      <li v-for="(address, index) in addressList" :key="index">{{ address.name }}</li>
    </ul>
  </div>
</template>

这样，当用户点击输入框时，会触发Autocomplete组件的自动完成搜索，当用户输入关键字时，会异步获取相关地址列表并显示在下拉框中。用户选择一个地址时，会触发placechanged事件，将选中的地址保存在Vue组件的data中，并显示在输入框中。