Google Maps API热图 - 如何添加图例/颜色栏？

时间：2015-10-25 14:27:05

标签： javascript google-maps heatmap

我想在我的HeatMap中添加一个颜色条/比例/图例（不知道怎么说），我在stackoverflow中搜索了一些主题，我找到了这个：HowTo create legend for google Heatmap?

显然，colorbar工作正常，但有两个问题：

1 - 地图中没有显示颜色条，我不知道如何添加颜色条。

2 - 没有数字刻度，只有颜色，我需要它们两个，所以我将能够知道红色在地图中意味着多少个点。

这是我的代码。

<!DOCTYPE html>
<html>
  <head>
    <title>My map</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      #panel {
        background-color: #fff;
        border: 1px solid #999;
        left: 25%;
        padding: 5px;
        position: absolute;
        top: 10px;
        z-index: 5;
      }
    </style>
  </head>

  <body>
    <div id="panel">
      <button onclick="changeRadius()">Change radius</button>
    </div>
    <div id="map"></div>
    <script>

var map, heatmap;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 20.5, lng: 15.6},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: getPoints(),
    map: map
  });
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}

function changeRadius() {
  heatmap.set('radius', heatmap.get('radius') ? null : 20);
}

function changeOpacity() {
  heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}

function getPoints() {
return [
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-26.91,-48.67),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-31.85412,-64.20727),
new google.maps.LatLng(-31.85412,-64.20727),
new google.maps.LatLng(-26.91,-48.67),
new google.maps.LatLng(-12.97,-38.5),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-31.85412,-64.20727),
new google.maps.LatLng(-8.12,-35.29),
new google.maps.LatLng(-13.06,-55.91),
new google.maps.LatLng(-17.56,-52.54),
new google.maps.LatLng(-17.56,-52.54),
new google.maps.LatLng(-1.36,-48.37),
new google.maps.LatLng(-25.09,-50.15),
new google.maps.LatLng(-23.18,-46.89),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-22.22,-51.81),
new google.maps.LatLng(-22.78,-43.3),
new google.maps.LatLng(-17.87,-51.72),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-24.95,-50.11),
new google.maps.LatLng(-31.85412,-64.20727),
new google.maps.LatLng(-29.25,-51.52),
new google.maps.LatLng(-25.51,-48.52),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-8.12,-35.29),
new google.maps.LatLng(-13.06,-55.91),
new google.maps.LatLng(-25.51,-48.52),
new google.maps.LatLng(-17.56,-52.54),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-22.78,-43.3),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-23.18,-46.89),
new google.maps.LatLng(-19.91,-43.93),
new google.maps.LatLng(-26.44,-53.17),
new google.maps.LatLng(-17.79,-50.91),
new google.maps.LatLng(-28.43,-52.2),
new google.maps.LatLng(-8.12,-35.29),
new google.maps.LatLng(-27.1,-52.61),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-27.34,-51.6),
new google.maps.LatLng(-8.12,-35.29),
new google.maps.LatLng(-23.18,-46.89),
new google.maps.LatLng(-26.91,-48.67),
new google.maps.LatLng(-27,-51.15),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(40.41,-3.7),
new google.maps.LatLng(51.69,5.3),
new google.maps.LatLng(-17.79,-50.91),
new google.maps.LatLng(-29.45,-51.96),
new google.maps.LatLng(-26.91,-48.67),
new google.maps.LatLng(-27.23,-52.02),
new google.maps.LatLng(-24.72,-53.74),
new google.maps.LatLng(-27.2,-51.4),
new google.maps.LatLng(-25.09,-50.15),
new google.maps.LatLng(-15.64,-56.13),
new google.maps.LatLng(-22.78,-43.3),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-26.91,-48.67),
new google.maps.LatLng(-13.06,-55.91),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-15.64,-56.13),
new google.maps.LatLng(-26.91,-48.67),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-13.06,-55.91),
new google.maps.LatLng(-28.43,-52.2),
new google.maps.LatLng(-31.85412,-64.20727),
new google.maps.LatLng(-24.72,-53.74),
new google.maps.LatLng(-28.43,-52.2),
new google.maps.LatLng(-31.85412,-64.20727),
new google.maps.LatLng(-23.65,-46.85),
new google.maps.LatLng(-20.29,-40.29),
new google.maps.LatLng(-23.65,-46.85),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-19.91,-43.93),
new google.maps.LatLng(-27.1,-52.61),
new google.maps.LatLng(-8.12,-35.29),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-18.91,-48.27),
new google.maps.LatLng(-27.1,-52.61),
new google.maps.LatLng(-27.1,-52.61),
new google.maps.LatLng(-17.79,-50.91),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-13.82,-56.08),
new google.maps.LatLng(-17.79,-50.91),
new google.maps.LatLng(-27,-51.15),
new google.maps.LatLng(-18.91,-48.27),
new google.maps.LatLng(-26.07,-53.05),
new google.maps.LatLng(-25.09,-50.15),
new google.maps.LatLng(-15.64,-56.13),
new google.maps.LatLng(-25.09,-50.15),
new google.maps.LatLng(-22.9,-47.06),
new google.maps.LatLng(-17.79,-50.91),
new google.maps.LatLng(-13.06,-55.91),
new google.maps.LatLng(-23.18,-46.89),
new google.maps.LatLng(-27.1,-52.61),
new google.maps.LatLng(-14.36,-56.97),
new google.maps.LatLng(-24.95,-50.11),
new google.maps.LatLng(-29.45,-51.96),
new google.maps.LatLng(-8.12,-35.29),
new google.maps.LatLng(-24.72,-53.74),
new google.maps.LatLng(-13.06,-55.91),
new google.maps.LatLng(-27.34,-51.6),
new google.maps.LatLng(-29.45,-51.96),
new google.maps.LatLng(-31.85412,-64.20727),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-27.2,-51.4),
new google.maps.LatLng(-17.79,-50.91),
new google.maps.LatLng(-28.43,-52.2),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-13.06,-55.91),
new google.maps.LatLng(-23.65,-46.85),
new google.maps.LatLng(-13.82,-56.08),
new google.maps.LatLng(-13.06,-55.91),
new google.maps.LatLng(-18.91,-48.27),
new google.maps.LatLng(-15.64,-56.13),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(52.98,6.29),
new google.maps.LatLng(-27.06,-51.66),
new google.maps.LatLng(-8.12,-35.29),
new google.maps.LatLng(-13.06,-55.91),
new google.maps.LatLng(-25.09,-50.15),
new google.maps.LatLng(-3.73,-38.52),
new google.maps.LatLng(-25.74,-53.06),
new google.maps.LatLng(-17.79,-50.91),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-20.29,-40.29),
new google.maps.LatLng(-3.73,-38.52),
new google.maps.LatLng(-24.72,-53.74),
new google.maps.LatLng(-17.79,-50.91),
new google.maps.LatLng(-15.64,-56.13),
new google.maps.LatLng(-28.43,-52.2),
new google.maps.LatLng(-24.72,-53.74),
new google.maps.LatLng(-27.34,-51.6),
new google.maps.LatLng(-24.72,-53.74),
new google.maps.LatLng(-17.79,-50.91),
new google.maps.LatLng(-17.87,-51.72),
new google.maps.LatLng(-22.31,-49.05),
new google.maps.LatLng(-15.79,-47.88),
new google.maps.LatLng(-27.4,-51.22),
new google.maps.LatLng(-22.22,-51.81),
new google.maps.LatLng(-13.06,-55.91),
new google.maps.LatLng(-24.72,-53.74),
new google.maps.LatLng(-23.18,-46.89),
new google.maps.LatLng(-18.91,-48.27),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-19.91,-43.93),
new google.maps.LatLng(-27,-51.15),
new google.maps.LatLng(-18.91,-48.27),
new google.maps.LatLng(-22.78,-43.3),
new google.maps.LatLng(-23.18,-46.89),
new google.maps.LatLng(-25.42,-49.26),
new google.maps.LatLng(-13.82,-56.08),
new google.maps.LatLng(-23.55052,-46.63331),
new google.maps.LatLng(-23.18,-46.89),
new google.maps.LatLng(-27.06,-51.66),
new google.maps.LatLng(-23.18,-46.89),
new google.maps.LatLng(-17.79,-50.91),
new google.maps.LatLng(-23.65,-46.85),
new google.maps.LatLng(-27.06,-51.66),
new google.maps.LatLng(-15.64,-56.13),
new google.maps.LatLng(-22.78,-43.3),
new google.maps.LatLng(-22.78,-43.3),
new google.maps.LatLng(-26.07,-53.05),
new google.maps.LatLng(-27,-51.15)
    ];}
</script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

提前感谢您的帮助。

0 个答案:

没有答案
相关问题
最新问题