基于vue的3D高德地图的引入
在引入高德地图的时候需要先注册一个账号
登录下面的网站
打开首页应用管理，我的应用
创建新的应用
根据自己的需求进行选择
创建完成之后，点击添加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>
原文地址：https://blog.csdn.net/weixin_66547608/article/details/140243741
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！