vue+高德API搭建前段经济页面

一、模板部分（`<template>`）

html

<template><div class="content"><div><dv-border-box-8 :reverse="true"><div class="head"><div class="head_content"><h1>12344822</h1><h2>2024年收入情况（单位：元）</h2></div><div class="head_content"><h1>45620218</h1><h2>2024年总支出情况（单位：元）</h2></div></div></dv-border-box-8></div><div> <div id="container"></div></div></div>
</template>

该部分使用 Vue 的模板语法，主要负责页面的布局和显示内容。
- 整体使用一个 div 元素，类名为 content，它包含了整个页面的内容。
- 内部有一个 dv-border-box-8 组件，使用了 :reverse="true" 属性，可能是一个自定义的边框组件，其内部有一个 div 元素类名为 head。
- head 元素内部包含两个 div 元素，类名为 head_content，分别显示了 2024 年的收入和支出信息，包含 h1 和 h2 元素，用于展示相应的数字和描述信息。
- 还有一个 div 元素，其 id 为 container，可能是为了后续在 JavaScript 中进行操作，例如将地图渲染在这个元素内。

二、脚本部分（`<script>`）

javascript

import AMapLoader from '@amap/amap-jsapi-loader';
export default {name: "HeatmapComponent",data() {return {map: null,heatmap: null}},methods: {initMap() {AMapLoader.load({key: "1e31659e58fa7666fe0d08f4487ec5c2",version: "2.0",plugins: ['AMap.HeatMap']}).then((AMap) => {this.map = new AMap.Map("container", {resizeEnable: true,center: [114.91934, 32.010736],zoom: 9,mapStyle: 'amap://styles/fresh'});this.map.plugin(["AMap.HeatMap"], () => {// 初始化 heatmap 对象this.heatmap = new AMap.HeatMap(this.map, {radius: 100,opacity: [0, 32]});// 设置数据集this.heatmap.setDataSet({data: [{ "lng": 114.05867, "lat": 32.116885, "count": 200 },{ "lng": 114.125595, "lat": 32.101005, "count": 220 },{ "lng": 114.512838, "lat": 32.20436, "count": 120 },{ "lng": 114.91934, "lat": 32.010736, "count": 100 },{ "lng": 114.740392, "lat": 32.34312, "count": 100 },{ "lng": 114.91934, "lat": 32.010736, "count": 90 },{ "lng": 114.879309, "lat": 31.643914, "count": 100 },{ "lng": 115.051683, "lat": 32.131426, "count": 120 },{ "lng": 1": 120 },{ "lng": 115.420101, "lat": 32.474772, "count": 180 },{ "lng": 115.406894, "lat": 31.79832, "count": 190 },{ "lng": 115.654066, "lat": 32.169239, "count": 200 },],max: 220});});}).catch(e => {console.log(e);});},showHeatmap() {this.heatmap.show();},hideHeatmap() {this.heatmap.hide();}},mounted() {this.initMap();}
}

导入和组件声明：
- import AMapLoader from '@amap/amap-jsapi-loader';：导入高德地图的 JavaScript API 加载器。
- export default {...}：定义一个 Vue 组件，名称为 HeatmapComponent。
数据部分（data）：
- map: null：存储地图对象，初始化为 null。
- heatmap: null：存储热力图对象，初始化为 null。
方法部分（methods）：
- initMap()：
  - 使用 AMapLoader.load() 方法加载高德地图 API，传入 key、version 和 plugins 等配置信息。
  - 在加载成功后，使用 AMap.Map 创建一个地图对象，将其绑定到 id 为 container 的元素上，并设置一些地图的属性，如 resizeEnable、center、zoom 和 mapStyle。
  - 然后使用 this.map.plugin() 加载 AMap.HeatMap 插件，在回调函数中，使用 new AMap.HeatMap() 初始化热力图对象，设置 radius 和 opacity 属性。
  - 使用 this.heatmap.setDataSet() 方法设置热力图的数据集，包含多个位置的经纬度和 count 信息，同时设置 max 值。
- showHeatmap()：调用热力图对象的 show() 方法显示热力图。
- hideHeatmap()：调用热力图对象的 hide() 方法隐藏热力图。
生命周期钩子（mounted）：
- 调用 initMap() 方法，在组件挂载后初始化地图和热力图。

三、样式部分（`<style>`）

css

<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>

全局样式：
- #container：设置 id 为 container 的元素的样式，包括宽度、高度、边距和边框。
局部样式（scoped）：
- .content：设置类名为 content 的元素的宽度。
- .head：设置类名为 head 的元素的内边距、高度和使用 flex 布局，实现子元素的水平分布。
- .head_content：使用 flex 布局，实现子元素的垂直分布和居中对齐。
- 其他样式：定义了 .body、.body_table1、.map-content 和 .map 的样式，如 width、height 和 overflow 等，用于布局和元素的显示。

完整代码：

<template><div class="content"><div><dv-border-box-8 :reverse="true"><div class="head"><div class="head_content"><h1>12344822</h1><h2>2024年收入情况（单位：元）</h2></div><div class="head_content"><h1>45620218</h1><h2>2024年总支出情况（单位：元）</h2></div></div></dv-border-box-8></div><div> <div id="container"></div></div></div>
</template><script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {name: "HeatmapComponent",data() {return {map: null,heatmap: null}},methods: {initMap() {AMapLoader.load({key: "1e31659e58fa7666fe0d08f4487ec5c2",version: "2.0",plugins: ['AMap.HeatMap']}).then((AMap) => {this.map = new AMap.Map("container", {resizeEnable: true,center: [114.91934, 32.010736],zoom: 9,mapStyle: 'amap://styles/fresh'});this.map.plugin(["AMap.HeatMap"], () => {// 初始化heatmap对象this.heatmap = new AMap.HeatMap(this.map, {radius: 100,opacity: [0, 32]});// 设置数据集this.heatmap.setDataSet({data: [{ "lng": 114.05867, "lat": 32.116885, "count": 200 },{ "lng": 114.125595, "lat": 32.101005, "count": 220 },{ "lng": 114.512838, "lat": 32.20436, "count": 120 },{ "lng": 114.91934, "lat": 32.010736, "count": 100 },{ "lng": 114.740392, "lat": 32.34312, "count": 100 },{ "lng": 114.91934, "lat": 32.010736, "count": 90 },{ "lng": 114.879309, "lat": 31.643914, "count": 100 },{ "lng": 115.051683, "lat": 32.131426, "count": 120 },{ "lng": 115.420101, "lat": 32.474772, "count": 180 },{ "lng": 115.406894, "lat": 31.79832, "count": 190 },{ "lng": 115.654066, "lat": 32.169239, "count": 200 },],max: 220});});}).catch(e => {console.log(e);});},showHeatmap() {this.heatmap.show();},hideHeatmap() {this.heatmap.hide();}},mounted() {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>