腾讯地图热力图

作者: 小北呀_ | 来源:发表于2019-11-21 14:21 被阅读0次

腾讯地图热力图
腾讯地图数据可视化之热力图
recharts 热力图
热力图原理及ArcGIS Pro 制作热力图
百度地图聚合折腾
echarts地图--热力图
leaflet地图热力图
谷歌地图热力图
地图热力图+轨迹
20160405_周二_早报

如图：热力图。

image.png

点击可查看腾讯地图热力图文档

首先肯定是去腾讯地图创建属于你的key

image.png

创建成功之后，我用的是vue，在index.html引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>demo</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but stop-resuming-electricity doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=你的key
"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

页面：

<template>
  <div>
      <div id="container" style="width: 100%;height: 300px;"></div>
  </div>
</template>
<script>
    export default {
        name: '',
        data() {
            return {}
        },
        created() {
            this.$nextTick(() => {
           // 创建地图
           let map = new qq.maps.Map(document.getElementById("container"), {
               //是地图中心经纬度
               center: new qq.maps.LatLng(39.9,116.4),
               zoom:7,//范围
           });
           // 创建热力图对象
           let heat = new qq.maps.visualization.Heat({
               map: map, // 必填参数，指定显示热力图的地图对象
               radius: 30, // 辐射半径，默认为20
           });
           // 获取热力数据
           let data = {
               max: 100,
               min: 0,
               data: [
                   {
                       lat: 40.07,
                       lng: 115.97,
                       value: 50,//程度，大小自定义
                   },
                   {
                       lat: 40.77,
                       lng: 115.7,
                       value: 100
                   }
               ]
           }
           // 向热力图传入数据
           heat.setData(data);

       })
        }
    }
</script>

<style>
    .index{
        width: 100%;
        height: 100%;
    }

</style>