当前位置： 首页 > article >正文

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

article 2025/1/23 1:11:08

 一、模板部分（<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>

效果截图：

 

 


http://www.kler.cn/a/514227.html

相关文章：

  • Ubuntu如何安装redis服务？
  • element el-table合并单元格
  • Ubuntu cuda-cudnn中断安装如何卸载
  • 2024年博客之星主题创作｜从零到一：我的技术成长与创作之路
  • SDL2：PC端编译使用 -- SDL2多媒体库使用音频实例
  • Java - WebSocket
  • 1170 Safari Park (25)
  • Unity预制体未即时刷新
  • 【SpringCloud】黑马微服务学习笔记
  • 备战春招—数字IC、FPGA笔试题（2）
  • Docker Load后存储的镜像及更改镜像存储目录的方法
  • Node.js 能做什么
  • 我的创作纪念日，纪念我的第512天
  • 【机器学习】量子机器学习：当量子计算遇上人工智能，颠覆即将来临？
  • 鸿蒙开发（32）arkTS、通过关系型数据库实现数据持久化封装
  • 鸿蒙系统的多端部署
  • 【漫话机器学习系列】052.解释平方和（Explained Sum of Squares, ESS）
  • Leetcode2218：从栈中取出 K 个硬币的最大面值和
  • 单片机基础模块学习——数码管
  • [Day 14]螺旋矩阵
  • 【深度学习】3.损失函数的作用
  • 【前端】HTML标签汇总
  • 微透镜阵列精准全检，白光干涉3D自动量测方案提效70%
  • rstrip 方法是 Python 字符串的一个内置方法，用于 删除字符串右边（末尾）的指定字符
  • WPF2-在xaml为对象的属性赋值
  • 大数据处理之数据去重、TopN统计与倒排索引的Hadoop实现