vue3+ts使用高德地图实现某个区域热力图立体和不立体

努力站桩的奶酪呦

已于 2023-04-10 09:57:14 修改

阅读量417

点赞数

文章标签： vue.js javascript

于 2023-04-08 14:55:35 首次发布

本文链接：https://blog.csdn.net/liuli0927/article/details/130029050

版权

本文介绍了如何在Vue3项目中结合TypeScript，利用@amap/amap-jsapi-loader库来集成高德地图，并展示某个区域的热力图效果，包括立体和非立体两种形式。

摘要由CSDN通过智能技术生成

需要下载

npm i @amap/amap-jsapi-loader --save

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import hotdata from "./hotData"; //这个是热力图的数据
import { ref } from "vue";
const heatmap = ref<any>(null);

AMapLoader.load({
  key: "自己的key",
  version: "2.0",
plugins: ["AMap.HeatMap"],
}).then((AMap) => {
    var map;//这里面map一定要是var map=null，否则会报错的
  map = new AMap.Map("map", {
    viewMode: "3D",//这个模式取决于热力图是否为3D
    pitch: 70,
    resizeEna