Fatal编程技术网
  • javascript/
  • Javascript 只需单击一下，即可从谷歌地图中删除多个HeatmapLayer

Javascript 只需单击一下，即可从谷歌地图中删除多个HeatmapLayer

javascript google-maps google-maps-api-3

Javascript 只需单击一下，即可从谷歌地图中删除多个HeatmapLayer,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我有一个按钮，可以将热图图层添加到我的地图中。当按下两次时。有两个热图层堆叠在一起。按delete heatmaplayer按钮时，仅删除1个heatmaplayer。为什么会这样？如何通过单击删除所有堆叠的热图 代码： 热图 创建热图 删除热图 var图、热图； 函数initMap（）{ map=new google.maps.map（document.getElementById（'map'）{ 缩放：13， 中心：{lat:37.775，lng:-122.434}， mapTypeId:

我有一个按钮，可以将热图图层添加到我的地图中。当按下两次时。有两个热图层堆叠在一起。按delete heatmaplayer按钮时，仅删除1个heatmaplayer。为什么会这样？如何通过单击删除所有堆叠的热图

代码：


热图
创建热图
删除热图
var图、热图；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：13，
中心：{lat:37.775，lng:-122.434}，
mapTypeId:google.maps.mapTypeId.SATELLITE
});
}
函数createHeatmap（）{
var热图数据=[
新的google.maps.LatLng（37.782551，-122.445368），
新google.maps.LatLng（37.782745，-122.444586），
新google.maps.LatLng（37.782842，-122.443688），]；
heatmap=新建google.maps.visualization.HeatmapLayer({
数据：热图数据，
});
热图.设置图（map）；
}
函数deleteHeatmap（）{
heatmap.setMap（空）；
}
在创建新的热图（无法访问原始热图）之前，您需要删除（从地图中删除）任何现有热图，或者只允许创建单个heapmap

代码片段：

var图、热图；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：13，
中心：{
拉脱维亚：37.775，
液化天然气：-122.434
},
mapTypeId:google.maps.mapTypeId.SATELLITE
});
}
函数createHeatmap（）{
如果（！heatmap | | |！heatmap.getMap | | heatmap.getMap（）==null）{
var热图数据=[
新的google.maps.LatLng（37.782551，-122.445368），
新google.maps.LatLng（37.782745，-122.444586），
新google.maps.LatLng（37.782842，-122.443688），
];
heatmap=新建google.maps.visualization.HeatmapLayer({
数据：热图数据，
});
热图.设置图（map）；
}
}
函数deleteHeatmap（）{
heatmap.setMap（空）；
}
google.maps.event.addDomListener（窗口'load'，initMap）

html，
身体，
#地图画布{
高度：500px；
宽度：500px；
边际：0px；
填充：0px
}



创建热图
删除热图

您必须跟踪您创建的所有“层”，然后无论您添加了多少热图，您只需使用for循环（通过创建的热图数组循环）将其擦除即可

这是使热图为零并清空阵列的主要功能，因此当您在整个阵列上启动时，也会从零索引开始：


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



函数deleteHeatmap（）{
for（var k=0；k

下面是小提琴中的例子：

完整代码：


<!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>




热图
创建热图
删除热图
var图、热图；
var热图数据；
var数组=[]；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：13，
中心：{lat:37.775，lng:-122.434}，
mapTypeId:google.maps.mapTypeId.SATELLITE
});
}
函数createHeatmap（）{
热图数据=[
新的google.maps.LatLng（37.782551，-122.445368），
新google.maps.LatLng（37.782745，-122.444586），
新google.maps.LatLng（37.782842，-122.443688），]；
heatmap=新建google.maps.visualization.HeatmapLayer({
数据：热图数据，
});
阵列推送（热图）；
热图.设置图（map）；
}
函数deleteHeatmap（）{
for（var k=0；k
非常好，谢谢。因为我想创建堆叠热图，这是我需要的解决方案。谢谢，这也是非常有用的解决方案，但我想创建堆叠热图，以便其他解决方案更适合我的特定用例。

<!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>