Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API热图-如何添加图例/颜色栏？

Javascript 谷歌地图API热图-如何添加图例/颜色栏？

javascript google-maps

Javascript 谷歌地图API热图-如何添加图例/颜色栏？,javascript,google-maps,heatmap,Javascript,Google Maps,Heatmap,我想在我的热图中添加一个色条/比例/图例（不知道怎么说），我在stackoverflow中搜索了一些主题，找到了这个： 颜色条显然起作用了，但有两个问题： 1-颜色栏没有显示在地图中，我不知道如何添加到那里 2-没有数字比例，只有颜色，我需要两者，所以我可以知道红色在地图上意味着多少点 这是我的密码 <!DOCTYPE html> <html> <head> <title>My map</title> <sty

我想在我的热图中添加一个色条/比例/图例（不知道怎么说），我在stackoverflow中搜索了一些主题，找到了这个：

颜色条显然起作用了，但有两个问题：

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>


我的地图
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
#面板{
背景色：#fff；
边框：1px实心#999；
左：25%；
填充物：5px；
位置：绝对位置；
顶部：10px；
z指数：5；
}
改变半径
var图、热图；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心：{lat:20.5，lng:15.6}，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
heatmap=新建google.maps.visualization.HeatmapLayer({
数据：getPoints（），
地图：地图
});
}
函数changeGradient（）{
var梯度=[
'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,0223,1)",，
‘rgba（0,0191,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）；
}
函数changeRadius（）{
heatmap.set（'radius'，heatmap.get（'radius'）？null:20）；
}
函数changeOpacity（）{
heatmap.set（'opacity'，heatmap.get（'opacity'）？null:0.2）；
}
函数getPoints（）{
返回[
新google.maps.LatLng（-25.42，-49.26），
新google.maps.LatLng（-26.91，-48.67），
新的google.maps.LatLng（-23.55052，-46.63331），
新的google.maps.LatLng（-31.85412，-64.20727），
新的google.maps.LatLng（-31.85412，-64.20727），
新google.maps.LatLng（-26.91，-48.67），
新的google.maps.LatLng（-12.97，-38.5），
新的google.maps.LatLng（-23.55052，-46.63331），
新google.maps.LatLng（-25.42，-49.26），
新google.maps.LatLng（-25.42，-49.26），
新的google.maps.LatLng（-31.85412，-64.20727），
新的google.maps.LatLng（-8.12，-35.29），
新google.maps.LatLng（-13.06，-55.91），
新google.maps.LatLng（-17.56，-52.54），
新google.maps.LatLng（-17.56，-52.54），
新的google.maps.LatLng（-1.36，-48.37），
新的google.maps.LatLng（-25.09，-50.15），
新google.maps.LatLng（-23.18，-46.89），
新google.maps.LatLng（-25.42，-49.26），
新google.maps.LatLng（-22.22，-51.81），
新google.maps.LatLng（-22.78，-43.3），
新google.maps.LatLng（-17.87，-51.72），
新google.maps.LatLng（-25.42，-49.26），
新google.maps.LatLng（-24.95，-50.11），
新的google.maps.LatLng（-31.85412，-64.20727），
新google.maps.LatLng（-29.25，-51.52），
新的google.maps.LatLng（-25.51，-48.52），
新的google.maps.LatLng（-23.55052，-46.63331），
新的google.maps.LatLng（-8.12，-35.29），
新google.maps.LatLng（-13.06，-55.91），
新的google.maps.LatLng（-25.51，-48.52），
新google.maps.LatLng（-17.56，-52.54），
新的google.maps.LatLng（-23.55052，-46.63331），
新google.maps.LatLng（-25.42，-49.26），
新google.maps.LatLng（-25.42，-49.26），
新google.maps.LatLng（-22.78，-43.3），
新的google.maps.LatLng（-23.55052，-46.63331），
新google.maps.LatLng（-25.42，-49.26），
新的google.maps.LatLng（-23.55052，-46.63331），
新的google.maps.LatLng（-23.55052，-46.63331），
新google.maps.LatLng（-23.18，-46.89），
新google.maps.LatLng（-19.91，-43.93），
新google.maps.LatLng（-26.44，-53.17），
新google.maps.LatLng（-17.79，-50.91），
新的google.maps.LatLng（-28.43，-52.2），
新的google.maps.LatLng（-8.12，-35.29），
新的google.maps.LatLng（-27.1，-52.61），
新google.maps.LatLng（-25.42，-49.26），
新的google.maps.LatLng（-27.34，-51.6），
新的google.maps.LatLng（-8.12，-35.29），
新google.maps.LatLng（-23.18，-46.89），
新google.maps.LatLng（-26.91，-48.67），
新的google.maps.LatLng（-27，-51.15），
新的google.maps.LatLng（-23.55052，-46.63331），
新的google.maps.LatLng（40.41，-3.7），
新google.maps.LatLng（51.69,5.3），
新google.maps.LatLng（-17.79，-50.91），
新google.maps.LatLng（-29.45，-51.96），
新google.maps.LatLng（-26.91，-48.67），
新google.maps.LatLng（-27.23，-52.02），
新google.maps.LatLng（-24.72，-53.74），
新的google.maps.LatLng（-27.2，-51.4），
新的google.maps.LatLng（-25.09，-50.15），
新的google.maps.LatLng（-15.64，-56.13），
新google.maps.LatLng（-22.78，-43.3），
新的google.maps.LatLng（-23.55052，-46.63331），
新google.maps.LatLng（-25.42，-49.26），
新google.maps.LatLng（-26.91，-48.67），
新google.maps.LatLng（-13.06，-55.91），
新的google.maps.LatLng（-23.55052，-46.63331），
新google.maps.LatLng（-25.42，-49.26），
新google.maps.LatLng（-25.42，-49.26），
新的google.maps.LatLng（-23.55052，-46.63331），
新的google.maps.LatLng（-23.55052，-46.63331），
新的google.maps.LatLng（-15.64，-56.13），
新google.maps.LatLng（-26.91，-48.67），
新google.maps.LatLng（-25.42，-49.26），
新google.maps.LatLng（-13.06，-55.91），
新的google.maps.LatLng（-28.43，-52.2），
新的google.maps.LatLng（-31.85412，-64.20727），
新google.maps.LatLng（-24.72，-53.74），
新的google.maps.LatLng（-28.43，-52.2），
新的google.maps.LatLng（-31.85412，-64.20727），
新google.maps.LatLng（-23.65，-46.85），
新的google.maps.LatLng（-20.29，-40.29），
新google.maps.LatLng（-23.65，-46.85），
新google.maps.LatLng（-25.42，-49.26），
新google.maps.LatLng（-19.91，-43.93），
新的google.maps.LatLng（-27.1，-52.61），
新的google.maps.LatLng（-8.12，-35.29），
新google.maps.LatLng（-25.42，-49.26），
新的google.maps.LatLng（-18.91，-48.27），
新的google.maps.LatLng（-27.1，-52.61），
新的google.maps.LatLng（-27.1，-52.61），
新google.maps.LatLng（-17.79，-50.91），
新的google.maps.LatLng（-23.55052，-46.63331），
新google.maps.LatLng（-13.82，-56.08），
新google.maps.LatLng（-17.79，-50.91），
新的google.maps.LatLng（-27，-51.15），
新的google.maps.LatLng（-18.91，-48.27），
新google.maps.LatLng（-26.07，-53.0）