在引入高德地图的时候需要先注册一个账号

登录下面的网站

账号认证 | 高德控制台 (amap.com)

打开首页应用管理，我的应用

创建新的应用

 根据自己的需求进行选择

 

 创建完成之后，点击添加key

不同的服务平台对应不同的可使用服务，选择自己适合的 

 

提交就行了 

就会生成对应的key和安全密钥

这段代码是一个使用 Vue.js 框架结合高德地图 API 来创建地图组件的示例。

首先，在模板部分（<template>）中，有一个包含 id 为 container 的 div 元素，用于承载后续创建的地图。

在 <script> 部分：

• 导入了 AMapLoader 用于加载高德地图的相关资源。
• 定义了组件的一些属性和方法：
  • data 中初始化了一个 map 对象为 null 。
  • methods 中的 initMap 方法用于加载高德地图并进行初始化设置，包括指定 key 、版本、插件，然后创建地图实例并设置地图的一些属性，如视图模式、缩放级别、倾斜角度、旋转角度和中心点位置。
• 在 mounted 钩子函数中调用 initMap 方法，在 DOM 初始化完成后进行地图的初始化操作。

在样式部分（<style>）：

• 定义了地图容器 #container 的样式，包括宽度、高度、外边距和边框。
• 定义了一些其他组件相关的样式，如 content 、head 、head_content 、body 、body_table1 、map-content 和 map 等的布局和样式。

</template> 
    <div>
      <div id="container"></div>
    </div>
</template>
 
<script>
  import AMapLoader from '@amap/amap-jsapi-loader';
 
  export default {
    name: "gaode",
    data() {
      return {
        map: null //初始化 map 对象
      }
    },
    methods: {
      initMap() {
        AMapLoader.load({
          key: "自己的key", //此处填入我们注册账号后获取的Key
          version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          this.map = new AMap.Map("container", { //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 17, //初始化地图级别
            pitch: 50,
            rotation: -15,
            center: [114.124776, 32.161415], //初始化地图中心点位置
          });
        }).catch(e => {
          console.log(e);
        })
      },
    },
    mounted() {
      //DOM初始化完成进行地图初始化
      this.initMap();
    }
  }
</script>
 
<style>
  #container {
    width: 100%;
    height: 1080px;
    margin: 10px auto;
    border: 1px solid red;
  }
</style>

<style scoped>
.content {
  width: 80%;
}
.head {
  padding: 10px;
  height: 80px;
  display: flex;
  justify-content: space-around;
}
.head_content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.body {
  margin-top: 10px;
}
.body_table1 {
  display: flex;
}
.map-content {
  width: 700px;
  height: 750px;
  overflow: hidden;
}
.map {
  width: 80%;
  height: 80%;
}
</style>