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

要在Vue中使用腾讯地图，你需要先在HTML中引入腾讯地图API的JS文件，然后在Vue组件中对其进行调用。

以下是一个基本的示例，展示了如何在Vue中使用腾讯地图：

1. 在HTML中引入腾讯地图API的JS文件

<script type="text/javascript" src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

你需要将YOUR_KEY替换为你的腾讯地图API密钥。

2. 在Vue组件中创建一个input框和一个地图容器

<template>
  <div>
    <input type="text" v-model="address" @click="showMap">
    <div id="map"></div>
  </div>
</template>

3. 在Vue组件中编写相关的逻辑

<script>
export default {
  data() {
    return {
      address: '',
      map: null,
      marker: null
    }
  },
  mounted() {
    // 初始化地图
    this.map = new qq.maps.Map(document.getElementById("map"), {
      center: new qq.maps.LatLng(39.916527,116.397128),
      zoom: 13
    });
  },
  methods: {
    showMap() {
      // 显示地图
      let self = this;
      let geocoder = new qq.maps.Geocoder({
        complete: function(result){
          let location = result.detail.location;
          self.map.setCenter(location);
          self.marker = new qq.maps.Marker({
            position: location,
            map: self.map
          });
        }
      });
      geocoder.getLocation(this.address);
    }
  }
}
</script>

在这个示例中，当用户点击input框时，会触发showMap方法。showMap方法会根据用户输入的地址，通过腾讯地图API获取该地址的坐标，并在地图上展示该地址的位置。

当然，你需要将YOUR_KEY替换为你的腾讯地图API密钥。