切换标记 - Google API V3 - 热图

Question

我根据这个不错的主题制作了一张地图：Toggle Markers in Google Maps。这是一个带有指示位置的图钉的热图。

但是，我不能切换我添加的引脚并保留热图层。

我在这里只添加了一些引脚（和热图数据点），以保持简短，一旦我将它们全部添加，就很难可视化热图本身——这就是为什么我需要一个按钮来切换它们。我在 Whosebug 上搜索了很多，但我是编码初学者，运行没时间了。

代码

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sao Paulo</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script>
    <script>    




// Adding Data Points


var map, pointarray, heatmap;

var taxiData = [new google.maps.LatLng(-23.672783, -46.664681),
new google.maps.LatLng(-23.672783, -46.664681),
new google.maps.LatLng(-23.672783, -46.664681),
new google.maps.LatLng(-23.672783, -46.664681),
new google.maps.LatLng(-23.672783, -46.664681),
new google.maps.LatLng(-23.532816, -46.565873),
new google.maps.LatLng(-23.532816, -46.565873),
new google.maps.LatLng(-23.532816, -46.565873),
new google.maps.LatLng(-23.532816, -46.565873),
new google.maps.LatLng(-23.532816, -46.565873),
new google.maps.LatLng(-23.532816, -46.565873),
new google.maps.LatLng(-23.532816, -46.565873),
new google.maps.LatLng(-23.532816, -46.565873),
new google.maps.LatLng(-23.532816, -46.565873),
new google.maps.LatLng(-23.531575, -46.651898),
new google.maps.LatLng(-23.531575, -46.651898),
new google.maps.LatLng(-23.526200, -46.550021),
new google.maps.LatLng(-23.714602, -46.687124),
new google.maps.LatLng(-23.714602, -46.687124),
new google.maps.LatLng(-23.714602, -46.687124),
new google.maps.LatLng(-23.714602, -46.687124),
new google.maps.LatLng(-23.714602, -46.687124),
new google.maps.LatLng(-23.599363, -46.539564),
new google.maps.LatLng(-23.599363, -46.539564),
new google.maps.LatLng(-23.599363, -46.539564),
new google.maps.LatLng(-23.648271, -46.748602),
new google.maps.LatLng(-23.648271, -46.748602),
new google.maps.LatLng(-23.648271, -46.748602),
new google.maps.LatLng(-23.648271, -46.748602),
new google.maps.LatLng(-23.743565, -46.704938),
new google.maps.LatLng(-23.753251, -46.670598),
new google.maps.LatLng(-23.753251, -46.670598),
new google.maps.LatLng(-23.753251, -46.670598),
new google.maps.LatLng(-23.538945, -46.454974),
new google.maps.LatLng(-23.538945, -46.454974),
new google.maps.LatLng(-23.538945, -46.454974),
new google.maps.LatLng(-23.538945, -46.454974),
new google.maps.LatLng(-23.538945, -46.454974),
new google.maps.LatLng(-23.502081, -46.449464),
new google.maps.LatLng(-23.502081, -46.449464),
new google.maps.LatLng(-23.502852, -46.631123),
new google.maps.LatLng(-23.502852, -46.631123),
new google.maps.LatLng(-23.550412, -46.597303),
new google.maps.LatLng(-23.550412, -46.597303),
new google.maps.LatLng(-23.550412, -46.597303),
new google.maps.LatLng(-23.616210, -46.495470),
new google.maps.LatLng(-23.616210, -46.495470),
new google.maps.LatLng(-23.476226, -46.703023),
new google.maps.LatLng(-23.530669, -46.444300),
new google.maps.LatLng(-23.492830, -46.600559),
new google.maps.LatLng(-23.492830, -46.600559),
new google.maps.LatLng(-23.492830, -46.600559),
new google.maps.LatLng(-23.722254, -46.704621),
new google.maps.LatLng(-23.594344, -46.751259),
new google.maps.LatLng(-23.594344, -46.751259),
new google.maps.LatLng(-23.594344, -46.751259),
new google.maps.LatLng(-23.594344, -46.751259),
new google.maps.LatLng(-23.526226, -46.417361),
new google.maps.LatLng(-23.526226, -46.417361),
new google.maps.LatLng(-23.526226, -46.417361),
new google.maps.LatLng(-23.521684, -46.561784),
new google.maps.LatLng(-23.521684, -46.561784),
new google.maps.LatLng(-23.521684, -46.561784),
new google.maps.LatLng(-23.521684, -46.561784),
new google.maps.LatLng(-23.521684, -46.561784),
new google.maps.LatLng(-23.499804, -46.516773),
new google.maps.LatLng(-23.646948, -46.701438),
new google.maps.LatLng(-23.523667, -46.700788),
new google.maps.LatLng(-23.529025, -46.529134),
new google.maps.LatLng(-23.529025, -46.529134),
new google.maps.LatLng(-23.529025, -46.529134),
new google.maps.LatLng(-23.548776, -46.560548),
new google.maps.LatLng(-23.548776, -46.560548),
new google.maps.LatLng(-23.548776, -46.560548),
new google.maps.LatLng(-23.501684, -46.493347),
new google.maps.LatLng(-23.501684, -46.493347),
new google.maps.LatLng(-23.652993, -46.645012),



];

function initialize() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(-23.5934217, -46.6627102),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

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

  var pointArray = new google.maps.MVCArray(taxiData);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray
  });

  heatmap.setMap(map);

  var locations = [
['1',-23.664681, -46.664681],
['2',-23.565873, -46.565873],
['3',-23.651898, -46.651898],
['4',-23.383921, -46.383921],
['5',-23.550021, -46.550021],
['6',-23.687124, -46.687124],
['7',-23.638630, -46.638630],
['8',-23.379916, -46.379916],
['9',-23.575142, -46.575142],
['10',-23.651898, -46.651898]


    ];

    var infowindow = new google.maps.InfoWindow();

    var iconBase = '';
    var marker, i;
    var markers = new Array();

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: iconBase + ''
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

    function AutoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      $.each(markers, function (index, marker) {
      bounds.extend(marker.position);
      });
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    AutoCenter();

}

function toggleHeatmap() {

if(heatmap.getMap() != null) {
    heatmap.setMap(null);
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
} else {
    heatmap.setMap(map)
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(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 : 35);}

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

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>

  <body>
    <div id="panel">
      <button onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>
      <button onclick="changeRadius()">Change radius</button>
      <button onclick="changeOpacity()">Change opacity</button>
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

强文本

如有任何帮助，我们将不胜感激。非常感谢！

Answer 1

函数 AutoCenter 使用某种库（可能是 jQuery），但您没有在任何地方加载该库。您可以加载 jQuery 或（最好，因为这是唯一使用 jQuery 的部分），替换此部分：

//  Go through each...
$.each(markers, function (index, marker) {
  bounds.extend(marker.position);
});

由...

//  Go through each...
for (var i = 0; i < markers.length; i++) {
  bounds.extend(markers[i].position)
}

markers-array 必须是全局可访问的（目前它只能在 initialize 内部访问）

替换这部分：
```
 var markers = new Array();
```
由....
```
window.markers = new Array();
```

要能够独立切换标记和热图，您需要 2 个函数

function toggleHeatmap() {
  heatMap.setMap((heatMap.getMap()===null)?map:null);
}

function toggleMarkers() {
 if(markers.length){
   var m=(markers[0].getMap()===null)?map:null;
   for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(m);
   }
 }
}

Answer 2

独立于热图切换标记。您需要创建另一个函数来切换它们，并删除 toggleHeatmap 中切换它们的代码：

function toggleMarkers() {
    if (markers[0].getMap() != null) {
        var arg = null;
    } else {
        var arg = map;
    }
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(arg);
    }
}

function toggleHeatmap() {

    if (heatmap.getMap() != null) {
        heatmap.setMap(null);
    } else {
        heatmap.setMap(map);
    }
}

如Dr.Molle所示，标记需要是全局的。

working jsfiddle

工作代码片段：

// Adding Data Points
var map, pointarray, heatmap;
var markers = [];

function initialize() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(-23.5934217, -46.6627102),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

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

  var pointArray = new google.maps.MVCArray(taxiData);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray
  });

  heatmap.setMap(map);

  var locations = [
    ['1', -23.664681, -46.664681],
    ['2', -23.565873, -46.565873],
    ['3', -23.651898, -46.651898],
    ['4', -23.383921, -46.383921],
    ['5', -23.550021, -46.550021],
    ['6', -23.687124, -46.687124],
    ['7', -23.638630, -46.638630],
    ['8', -23.379916, -46.379916],
    ['9', -23.575142, -46.575142],
    ['10', -23.651898, -46.651898]


  ];

  var infowindow = new google.maps.InfoWindow();

  var iconBase = '';
  var marker, i;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: iconBase + ''
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      };
    })(marker, i));
  }

  function AutoCenter() {
    //  Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds();
    //  Go through each...
    $.each(markers, function(index, marker) {
      bounds.extend(marker.position);
    });
    //  Fit these bounds to the map
    map.fitBounds(bounds);
  }
  AutoCenter();

}

function toggleMarkers() {
  if (markers[0].getMap() != null) {
    var arg = null;
  } else {
    var arg = map;
  }
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(arg);
  }
}

function toggleHeatmap() {

  if (heatmap.getMap() != null) {
    heatmap.setMap(null);
  } else {
    heatmap.setMap(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 : 35);
}

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

google.maps.event.addDomListener(window, 'load', initialize);
var taxiData = [new google.maps.LatLng(-23.672783, -46.664681),
  new google.maps.LatLng(-23.672783, -46.664681),
  new google.maps.LatLng(-23.672783, -46.664681),
  new google.maps.LatLng(-23.672783, -46.664681),
  new google.maps.LatLng(-23.672783, -46.664681),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.531575, -46.651898),
  new google.maps.LatLng(-23.531575, -46.651898),
  new google.maps.LatLng(-23.526200, -46.550021),
  new google.maps.LatLng(-23.714602, -46.687124),
  new google.maps.LatLng(-23.714602, -46.687124),
  new google.maps.LatLng(-23.714602, -46.687124),
  new google.maps.LatLng(-23.714602, -46.687124),
  new google.maps.LatLng(-23.714602, -46.687124),
  new google.maps.LatLng(-23.599363, -46.539564),
  new google.maps.LatLng(-23.599363, -46.539564),
  new google.maps.LatLng(-23.599363, -46.539564),
  new google.maps.LatLng(-23.648271, -46.748602),
  new google.maps.LatLng(-23.648271, -46.748602),
  new google.maps.LatLng(-23.648271, -46.748602),
  new google.maps.LatLng(-23.648271, -46.748602),
  new google.maps.LatLng(-23.743565, -46.704938),
  new google.maps.LatLng(-23.753251, -46.670598),
  new google.maps.LatLng(-23.753251, -46.670598),
  new google.maps.LatLng(-23.753251, -46.670598),
  new google.maps.LatLng(-23.538945, -46.454974),
  new google.maps.LatLng(-23.538945, -46.454974),
  new google.maps.LatLng(-23.538945, -46.454974),
  new google.maps.LatLng(-23.538945, -46.454974),
  new google.maps.LatLng(-23.538945, -46.454974),
  new google.maps.LatLng(-23.502081, -46.449464),
  new google.maps.LatLng(-23.502081, -46.449464),
  new google.maps.LatLng(-23.502852, -46.631123),
  new google.maps.LatLng(-23.502852, -46.631123),
  new google.maps.LatLng(-23.550412, -46.597303),
  new google.maps.LatLng(-23.550412, -46.597303),
  new google.maps.LatLng(-23.550412, -46.597303),
  new google.maps.LatLng(-23.616210, -46.495470),
  new google.maps.LatLng(-23.616210, -46.495470),
  new google.maps.LatLng(-23.476226, -46.703023),
  new google.maps.LatLng(-23.530669, -46.444300),
  new google.maps.LatLng(-23.492830, -46.600559),
  new google.maps.LatLng(-23.492830, -46.600559),
  new google.maps.LatLng(-23.492830, -46.600559),
  new google.maps.LatLng(-23.722254, -46.704621),
  new google.maps.LatLng(-23.594344, -46.751259),
  new google.maps.LatLng(-23.594344, -46.751259),
  new google.maps.LatLng(-23.594344, -46.751259),
  new google.maps.LatLng(-23.594344, -46.751259),
  new google.maps.LatLng(-23.526226, -46.417361),
  new google.maps.LatLng(-23.526226, -46.417361),
  new google.maps.LatLng(-23.526226, -46.417361),
  new google.maps.LatLng(-23.521684, -46.561784),
  new google.maps.LatLng(-23.521684, -46.561784),
  new google.maps.LatLng(-23.521684, -46.561784),
  new google.maps.LatLng(-23.521684, -46.561784),
  new google.maps.LatLng(-23.521684, -46.561784),
  new google.maps.LatLng(-23.499804, -46.516773),
  new google.maps.LatLng(-23.646948, -46.701438),
  new google.maps.LatLng(-23.523667, -46.700788),
  new google.maps.LatLng(-23.529025, -46.529134),
  new google.maps.LatLng(-23.529025, -46.529134),
  new google.maps.LatLng(-23.529025, -46.529134),
  new google.maps.LatLng(-23.548776, -46.560548),
  new google.maps.LatLng(-23.548776, -46.560548),
  new google.maps.LatLng(-23.548776, -46.560548),
  new google.maps.LatLng(-23.501684, -46.493347),
  new google.maps.LatLng(-23.501684, -46.493347),
  new google.maps.LatLng(-23.652993, -46.645012)
];

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<div id="panel">
  <button onclick="toggleHeatmap()">Toggle Heatmap</button>
  <button onclick="toggleMarkers()">Toggle Markers</button>
  <button onclick="changeGradient()">Change gradient</button>
  <button onclick="changeRadius()">Change radius</button>
  <button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map-canvas"></div>

切换标记 - Google API V3 - 热图

Toggle markers - Google API V3 - Heatmap

javascript

google-maps

google-maps-api-3