如何避免google地图中的热图图层相互叠加？

Question

我正在尝试实现一个HTML滑块，并将滑块值与位置的热图半径相连接。当我增加滑块时，半径正确地增加了，但当我减少滑块时，它没有减少，而是覆盖在现有的热图上。但是当我缩小它时，它没有缩小，而是覆盖在现有的热图上，因此看不出有什么不同。

HTML代码

<div class="slidecontainer">
<style="text-align:center; font: 5px; padding-top: 0px;"> Choose the Time range </style>                              
<br><input type="range" min="1" max="24" value="0" class="slider" name="sder" form="form1" id="myRange" onchange="updateTextInput(this.value);"></div>

JS代码

var chenai = new google.maps.LatLng(13.051126, 80.195590);

  map = new google.maps.Map(document.getElementById('map'), {
    center: chenai,
    zoom: 13,
    mapTypeId: 'satellite'
  });

 function updateTextInput(val) {

        var testheatMapData = [
            {location: new google.maps.LatLng(13.034603, 80.207509), weight: 20},
            {location: new google.maps.LatLng(13.071126, 80.195590), weight: 15},
            {location: new google.maps.LatLng(13.025914, 80.156675), weight: 10}     ];

        heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatMapData,
          radius: val,
        });

        heatmap.setMap(map);

}

Answer 1

1. 创建热图层和
2. 在滑块调用的更新函数中更新其半径。

var map;
var heatmap;

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(37.783, -122.445),
    zoom: 13
  };

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

  var heatmapData = [
    new google.maps.LatLng(37.782, -122.447),
    new google.maps.LatLng(37.782, -122.445),
    new google.maps.LatLng(37.782, -122.443),
    new google.maps.LatLng(37.782, -122.441),
    new google.maps.LatLng(37.782, -122.439),
    new google.maps.LatLng(37.782, -122.437),
    new google.maps.LatLng(37.782, -122.435),
    new google.maps.LatLng(37.785, -122.447),
    new google.maps.LatLng(37.785, -122.445),
    new google.maps.LatLng(37.785, -122.443),
    new google.maps.LatLng(37.785, -122.441),
    new google.maps.LatLng(37.785, -122.439),
    new google.maps.LatLng(37.785, -122.437),
    new google.maps.LatLng(37.785, -122.435)
  ];

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

function updateTextInput(val) {

  heatmap.setOptions({
    radius: val
  });
}

#map {
  height: 170px;
}

<div id="map"></div>
<input type="range" min="1" max="24" value="10" class="slider" name="sder" form="form1" id="myRange" onchange="updateTextInput(this.value);">

<!-- Replace the value of the key parameter with your own API key. -->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=visualization" async defer></script>