vue3 天地图上加热力图

码住不放松

已于 2022-12-22 15:57:58 修改

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript html

于 2022-12-14 16:11:29 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53898445/article/details/128317890

本文介绍如何在Vue3应用中利用天地图展示热力图。通过引入地图库并结合JavaScript代码，实现了在网页上动态展示热力图的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

代码

引入地图

index.html
//引入天地图
    <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=自己的token"></script>
//引入热力图
    <script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/HeatmapOverlay.js">
//线上地址会引入失败 可下载到本地再引入
    <script type="text/javascript" src="/HeatmapOverlay.js"></script>
</script>

html

<div class="map" id="map">

script

//count 数量
const data = [
    { name: '1111', count: 21106, lat:24.963, lng:110.889  },
    { name: 'sdf', count: 1111, lat:24.971,lng:110.867 },
    { name: 'sdfsd', count: 1111, lat: 24.969,lng: 110.843},
    { name: 'sdf', c