vue3接入高德地图然如何实现

要实现 Vue3 接入高德地图，可以按照以下步骤进行：

1. 在 index.html 中引入高德地图的 JavaScript API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2. 在 Vue3 的组件中，使用 `mounted` 钩子函数初始化地图：

mounted() {
  // 创建地图实例
  const map = new AMap.Map('map-container', {
    zoom: 10,
    center: [116.397428, 39.90923]
  });
  // 添加插件
  AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
    map.addControl(new AMap.ToolBar());
    map.addControl(new AMap.Scale());
  });
}

其中，`map-container` 是一个 div 元素的 id，用于显示地图。

3. 在组件的 template 中添加地图容器：

<template>
  <div id="map-container" style="height: 500px;"></div>
</template>

这样就可以在 Vue3 中接入高德地图了。