vue3 +ts实现高德地图的展示

Vue3和TypeScript都是现代化前端开发技术，相结合可以大大提高开发效率和代码质量。高德地图是目前应用广泛的地图API之一，在Vue3中使用TypeScript实现高德地图展示，可以借助高德地图JavaScript API实现。

首先需要在项目中安装高德地图的JavaScript API：npm install @amap/amap-jsapi-loader

接着在组件中引入AMapJSAPILoader，代码如下：

import { defineComponent, onMounted } from 'vue';
import { AMapJSAPILoader } from '@amap/amap-jsapi-loader';

export default defineComponent({
  setup() {
    const initMap = () => {
      AMapJSAPILoader.load({
        key: '你的高德地图key',
        version: '2.0',
        plugins: [],
      }).then((AMap: any) => {
        // 在这里可以使用高德地图API进行相关操作
      });
    };

    onMounted(() => {
      initMap();
    });

    return {};
  },
});

其中，key为高德地图的开发者key，version为API的版本号，plugins为需要引入的插件。

使用AMapJSAPILoader.load方法加载API之后，就可以通过AMap对象操作地图了，例如：

AMap.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
    enableHighAccuracy: true, // 是否使用高精度定位，默认：true
    timeout: 10000, // 超过10秒后停止定位，默认：无穷大
    maximumAge: 0, // 定位结果缓存0毫秒，默认：0
    convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
    showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
    showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
    panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
    zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围可见，默认：false
  });
  geolocation.getCurrentPosition();
  AMap.event.addListener(geolocation, 'complete', onComplete);
  AMap.event.addListener(geolocation, 'error', onError);

  function onComplete(data: any) {
    // data中包含定位结果
  }

  function onError(error: any) {
    // 定位出错
  }
});

以上代码使用高德地图的定位插件获取当前位置，通过添加事件监听器，可以获取获取定位结果。通过类似的方式，可以实现地图的缩放、平移、标注、路径规划等功能。

总之，在Vue3中使用TypeScript实现高德地图的展示，可以借助高德地图的JavaScript API，通过类似上述的方法进行相关操作，实现地图的各种功能。