【vue】移动端H5+腾讯地图，实现地图选取坐标点获取位置信息

在Vue项目中使用腾讯地图进行选取坐标点并获取位置信息，可以通过以下步骤实现：

1. 引入腾讯地图API。
2. 创建地图实例。
3. 添加点击事件获取坐标。
4. 使用坐标转位置信息的API。

以下是具体实现的代码示例：

首先，在public/index.html中引入腾讯地图的API：

<script src="https://map.qq.com/api/js?v=2.exp&key=您的API密钥"></script>

然后，在Vue组件中创建地图并实现选点功能：

<template>
  <div id="map" style="width: 100%; height: 300px;"></div>
</template>
 
<script>
export default {
  name: 'MapComponent',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new qq.maps.Map(document.getElementById('map'), {
        center: new qq.maps.LatLng(39.916527, 116.397128), // 设定中心点坐标
        zoom: 13 // 设定地图显示的缩放级别
      });
 
      qq.maps.event.addListener(map, 'click', (event) => {
        const lat = event.latLng.getLat();
        const lng = event.latLng.getLng();
        const coord = new qq.maps.LatLng(lat, lng);
 
        // 使用坐标转位置信息的服务
        const geocoder = new qq.maps.Geocoder();
        geocoder.getAddress(coord);
 
        qq.maps.event.addListener(geocoder, 'complete', function(res) {
          console.log(res.detail); // 获取到的位置信息
        });
 
        // 清除之前的标记
        map.clearOverlays();
 
        // 添加标记
        const marker = new qq.maps.Marker({
          position: coord,
          map: map
        });
      });
    }
  }
};
</script>

在上述代码中，请将new qq.maps.LatLng(39.916527, 116.397128)中的坐标设置为默认显示地图的中心点，并将您的API密钥替换为您从腾讯地图平台获取的API密钥。

用户点击地图后，会通过click事件获取点击的坐标，然后使用腾讯地图的Geocoder服务将坐标转换为位置信息，并在控制台输出。同时，在地图上会添加一个标记表示选取的坐标点。