基于vue的3D高德地图的引入

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

登录下面的网站

账号认证 | 高德控制台 (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", //此处填入我们注册账号后获取的Keyversion: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("container", { //设置地图容器idviewMode: "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>