从谷歌地图删除一个以上的HeatmapLayer与一键

我有一个按钮，它将一个热播放器添加到我的地图。按两次。有2热播放器堆叠。当按下删除heatmaplayer按钮时，只有一个heatmaplayer被删除。为什么会这样呢?如何一键删除所有堆叠的热图?

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Heatmaps</title>
  </head>
  <body>
    <div id="floating-panel">
      <button onclick="createHeatmap()">Create Heatmap</button>
      <button onclick="deleteHeatmap()">Delete Heatmap</button>
    </div>
    <div id="map" style="height: 600px; width: 800px;"></div>
    <script>
var map, heatmap;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 37.775, lng: -122.434},
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });
}
function createHeatmap(){
        var heatmapdata = [
                       new google.maps.LatLng(37.782551, -122.445368),
                       new google.maps.LatLng(37.782745, -122.444586),
                       new google.maps.LatLng(37.782842, -122.443688),];
        heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapdata,
        });
        heatmap.setMap(map);
}
function deleteHeatmap(){
    heatmap.setMap(null);
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

您必须跟踪您创建的所有"层"，然后无论您添加多少热图，您只需使用for循环(遍历创建的热图数组)擦除它们。

这是一个主要的函数，它使热图无效并清空数组，所以当你从头开始时，数组也从0开始索引:

    function deleteHeatmap(){
       for (var k = 0; k < array.length; k++) {
                     array[k].setMap(null);
         }
       array=[];
    }

下面是小提琴中的例子:https://jsfiddle.net/eugensunic/3q6etox0/3/

完整代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Heatmaps</title>
  </head>
  <body>
    <div id="floating-panel">
      <button onclick="createHeatmap()">Create Heatmap</button>
      <button onclick="deleteHeatmap()">Delete Heatmap</button>
    </div>
    <div id="map" style="height: 600px; width: 800px;"></div>
    <script>
var map, heatmap;
        var heatmapdata;
var array=[];
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 37.775, lng: -122.434},
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });
}
function createHeatmap(){
        heatmapdata = [
                       new google.maps.LatLng(37.782551, -122.445368),
                       new google.maps.LatLng(37.782745, -122.444586),
                       new google.maps.LatLng(37.782842, -122.443688),];
        heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapdata,
        });
        array.push(heatmap);
        heatmap.setMap(map);
}
function deleteHeatmap(){
         for (var k = 0; k < array.length; k++) {
                 array[k].setMap(null);
    }
         array=[];
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

在创建新热图(失去对原始热图的访问权限)之前，您需要删除(从地图中删除)任何现有的热图，或者只允许创建单个堆map。

概念验证

代码片段:

var map, heatmap;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 37.775,
      lng: -122.434
    },
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });
}
function createHeatmap() {
  if (!heatmap || !heatmap.getMap || heatmap.getMap() == null) {
    var heatmapdata = [
      new google.maps.LatLng(37.782551, -122.445368),
      new google.maps.LatLng(37.782745, -122.444586),
      new google.maps.LatLng(37.782842, -122.443688),
    ];
    heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapdata,
    });
    heatmap.setMap(map);
  }
}
function deleteHeatmap() {
  heatmap.setMap(null);
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<div id="floating-panel">
  <button onclick="createHeatmap()">Create Heatmap</button>
  <button onclick="deleteHeatmap()">Delete Heatmap</button>
</div>
<div id="map" style="height: 600px; width: 800px;"></div>

相关内容

最新更新

热门标签：