vue 高德地图 卫星地图

在Vue中使用高德地图的卫星地图，你可以按照以下步骤进行操作：

1. 首先，在高德开发平台上申请开发者账号并获取API Key。\[1\]
2. 安装vue-amap和@amap/amap-jsapi-loader这两个依赖包。你可以使用以下命令进行安装：

   npm i @amap/amap-jsapi-loader --save

或者

   cnpm i @amap/amap-jsapi-loader --save

\[1\]

3. 在Vue组件中引入AMapLoader，并在mounted钩子函数中加载地图。你可以参考以下代码示例：

   <template>
     <div>
       <div id="container"></div>
     </div>
   </template>

   <script>
   import { AMapLoader } from '@amap/amap-jsapi-loader';

   export default {
     mounted() {
       AMapLoader.load({
         key: '你的API Key',
         version: '2.0',
         plugins: \['AMap.Satellite'\],
       }).then((AMap) => {
         const map = new AMap.Map('container', {
           center: \[经度, 纬度\],
           zoom: 缩放级别,
           layers: \[new AMap.TileLayer.Satellite()\],
         });
       });
     },
   };
   </script>

请将代码中的`你的API Key`替换为你在高德开发平台上申请的API Key，并根据需要设置地图的中心点、缩放级别等参数。\[1\]

通过以上步骤，你就可以在Vue中使用高德地图的卫星地图了。记得在Vue组件中引入AMapLoader，并在mounted钩子函数中加载地图。\[1\]
#### 引用[.reference_title]
- *1* [Vue3 + 高德地图](https://blog.csdn.net/m0_68683769/article/details/124279446)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [（可直接复制使用）vue2+高德地图poi搜索和高德组件，可以地图选点，经纬度，比例尺，卫星图，路网，路况...](https://blog.csdn.net/qq_59747594/article/details/124849955)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]