切换标记 - Google API V3 - 热图

时间：2015-01-20 18:00:45

标签： javascript google-maps google-maps-api-3

我根据这个好主题制作了一张地图：Toggle Markers in Google Maps。它是一个带有引脚的热图，表示地点。

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

我在这里只添加了一些引脚（和热图数据点），以便保持简短，一旦我添加它们，很难将热图自身可视化 - 这就是＆＃39; s为什么我需要一个按钮来切换它们。 我在stackoverflow上搜索了很多，但我是编码和时间不多的初学者。

CODE 

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

强文

非常感谢任何帮助。非常感谢！

2 个答案:

答案 0 :(得分：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

工作代码段：

＆＃13;
＆＃13; 
// 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)
];
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

  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)
}

  2. markers - 数组必须是全局可访问的（目前只能在initialize内访问）

    替换这部分：

     var markers = new Array();

    ...通过

    window.markers = new Array();

    3. 为了能够独立切换标记和热图，您需要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);
   }
 }
}
相关问题
最新问题