使用Google地图API配置热图叠加层 [英] Configuring heatmap overlays using Google Maps API

查看:137
本文介绍了使用Google地图API配置热图叠加层的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用Google Maps API来生成位置的热图。它可以工作,但结果不是很有用,因为热图所呈现的部分很小,很难看清楚: b
$ b



文档中的任何内容都没有提示将热图扩展为更大斑点。是否有这样做的无证方式,或者这只是API的限制?我只需要更多的数据点吗?我粘贴了我在下面使用的代码。

 <!DOCTYPE html> 
< html>
< head>
< meta name =viewportcontent =width = device-width,initial-scale = 1.0,user-scalable = no/>
< style type =text / css>
html {
height:100%
}

body {
height:100%;
margin:0px;
padding:0px
}

#map {
height:100%
}
< / style>

< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
函数initialize(){
var myLatlng = new google.maps.LatLng(44.646959,-63.589697);
var myOptions = {
zoom:14,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map'),myOptions);

var layer = new google.maps.FusionTablesLayer({
query:{
select:'geometry',
from:'[fusion table id removed]'
},
heatmap:{enabled:true}
});

layer.setMap(map);
}
< / script>
< / head>
< body onload =initialize()>
< div id =map>< / div>
< / body>
< / html>


解决方案

查看maxIntensity。我有类似的问题。 maxIntensity与半径相结合固定它。
$ b blockquote>

maxIntensity:热图的最大强度。默认情况下,
热图颜色根据地图上任何特定像素的最大
点浓度动态缩放。这
属性允许你指定一个固定的最大值。设定最高
强度可能会有帮助,因为当您的数据集包含少数异常值
且强度异常高时。


I'm trying to use the Google Maps API to generate a heatmap of locations. It works, but the result is not very useful, since the parts rendered by the heatmap are small are hard to see:

Nothing in the docs suggest a way to expand the heatmap to render in larger blobs. Is there an undocumented way of doing this or is this just a limitation of the API? Do I just need more data points? I've pasted the code I'm using below.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html {
        height: 100%
      }

      body {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

      #map {
        height: 100%
      }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        var myLatlng = new google.maps.LatLng(44.646959,-63.589697);
        var myOptions = {
          zoom : 14,
          center : myLatlng,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById('map'), myOptions);

        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: 'geometry',
            from: '[ fusion table id removed ]'
          },
          heatmap: { enabled: true }
        });

        layer.setMap(map);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map"></div>
  </body>
</html>

解决方案

Check out maxIntensity. I had a similar issue. maxIntensity combined with radius fixed it.

maxIntensity: The maximum intensity of the heatmap. By default, heatmap colors are dynamically scaled according to the greatest concentration of points at any particular pixel on the map. This property allows you to specify a fixed maximum. Setting the maximum intensity can be helpful when your dataset contains a few outliers with an unusually high intensity.

这篇关于使用Google地图API配置热图叠加层的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆