Vue中使用腾讯地图选点组件问题及解决办法

前端

2024-01-09 14:06:55

问题 1：选择地址的回调路径不兼容哈希路由

在Vue中使用腾讯地图选点组件时，如果使用的是原来的哈希路由模式，即路径上会带上 #，那么回调地址就无法识别。为了解决这个问题，我们需要用到escape进行URL处理，这样就可以跳转过去了。

问题 2：需要获取省市区名称

在使用腾讯地图选点组件时，我们可能需要获取所选地址的省、市、区名称。在默认情况下，这些信息并不会自动提供。要获取这些信息，我们需要使用腾讯地图的地址解析API。

步骤

首先，我们需要在腾讯地图官网上申请一个API密钥。
然后，我们在Vue项目中安装腾讯地图JavaScript API。
接下來，我们需要在Vue组件中初始化腾讯地图。
初始化完成后，我们就可以使用腾讯地图的选点组件了。
当用户选择一个地址后，我们可以通过选点组件的getSelectedLocation()方法来获取所选地址的坐标。
最后，我们可以使用腾讯地图的地址解析API来获取所选地址的省、市、区名称。

实例

import Vue from 'vue';
import TencentMap from 'tencent-map';

Vue.component('tencent-map', {
  template: '<div id="tencent-map"></div>',
  data() {
    return {
      map: null,
      marker: null
    };
  },
  mounted() {
    this.map = new TencentMap('tencent-map');
    this.marker = new TencentMap.Marker({
      position: new TencentMap.LatLng(39.90923, 116.397428),
      map: this.map
    });
  },
  methods: {
    selectAddress() {
      const location = this.marker.getPosition();
      const geocoder = new TencentMap.Geocoder();
      geocoder.getAddress(location, (result) => {
        console.log(result.address);
      });
    }
  }
});