vue 高德地图卫星地图

你可以使用高德地图提供的 JavaScript API 来在 Vue 中集成高德地图的卫星地图。首先，你需要在 HTML 文件中引入高德地图的 JavaScript API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的API密钥"></script>

然后，在 Vue 组件中，你可以使用生命周期钩子函数 `mounted` 来初始化地图并显示卫星地图：

mounted() {
  // 创建地图实例
  const map = new AMap.Map('mapContainer', {
    zoom: 13, // 设置地图缩放级别
    center: [经度, 纬度], // 设置地图中心点坐标
    layers: [new AMap.TileLayer.Satellite()], // 设置地图图层为卫星地图
  });
}

在上面的代码中，你需要将 `经度` 和 `纬度` 替换为你想要显示的地图中心点的经纬度。然后，你可以在 Vue 模板中添加一个带有 `id` 为 `mapContainer` 的 `<div>` 元素来显示地图：

<template>
  <div id="mapContainer" style="width: 100%; height: 400px;"></div>
</template>

这样，当 Vue 组件被渲染时，就会显示一个带有卫星地图的高德地图实例。

请注意，上述代码中的 `你的API密钥` 部分需要替换为你在高德地图开发者平台申请的 API 密钥，否则地图可能无法正常显示。另外，为了避免隐私泄露，强烈建议将 API 密钥存储在安全的地方，并不要直接暴露在客户端代码中。