Question

我在这里添加了整个编码块。它们可能看起来与你们相似，因为我已经在earthquake visualization tutorial上建立了项目基础。教程非常好但是现在，我想要一个按钮或复选框来切换不同的叠加层。

我将代码拆分为4个部分。加热，标记，圆圈和热图。如果有人可以帮助我，我真的会感到很沮丧，因为我在外面尝试了很多教程或例子，但它并不是很成功。

这是我的代码

标题

<script>
    var map;
    var results;

    //setting up map
    function initialize() {
      var mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(-27.48939, 153.012772),
            mapTypeId: google.maps.MapTypeId.ROADMAP 
          };

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

      //set location of file
      var script = document.createElement('script');
          script.src = '\week.json';
          document.getElementsByTagName('head')[0].appendChild(script); 
    }



 var infowindow = new google.maps.InfoWindow({});
    //createMarker function
    function createMarker(latLng, title, content,icon) {
            var marker = new google.maps.Marker({
              position: latLng,
              map: map,
              title: title,
            });


    //click or moveover listener for infowindow
            google.maps.event.addListener(marker, "click", function() {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            });

    }

带标记的信息窗口

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

function createMarker(latLng, title, content,icon) {
        var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          title: title,
        });

    window.eqfeed_callback = function(results) {
      var bounds=new google.maps.LatLngBounds();
      for (var i = 0; i < results.features.length; i++) {

        var wifin = results.features[i]; 
        var coords = wifin.geometry.coordinates; 
        var latLng = new google.maps.LatLng(coords[0],coords[1]); 
        bounds.extend(latLng);

        var content ="<div style='height:100px; width:300px; overflow:auto;'><table>";
        content += "<tr><th align='left'>WifiMacAddress</th><td>"+wifin.properties.WifiMacAddress+"</td></tr>";
        content += "<tr><th align='left'>SSID</th><td>"+wifin.properties.SSID+"</td></tr>";
        content += "<tr><th align='left'>SignalStrength</th><td>"+wifin.properties.SignalStrength+"</td></tr>";
        content += "<tr><th align='left'>WifiFrequency</th><td>"+wifin.properties.WifiFrequency+"</td></tr>";
        content +="</table>";

        createMarker(latLng,wifin.WifiMacAddress,content);
      }
      map.fitBounds(bounds);
    }

圆圈大小

window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
     var wifin = results.features[i]; 
        var coords = wifin.geometry.coordinates; 
        var latLng = new google.maps.LatLng(coords[0],coords[1]); 
        //bounds.extend(latLng);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: getCircle(wifin.properties.SignalStrength)
    });
  }
}

function getCircle(strength) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'green',
    fillOpacity: .2,
    scale: Math.pow(2, strength) / Math.PI,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

热图

window.eqfeed_callback = function(results) {
var heatmapData = [];
  for (var i = 0; i < results.features.length; i++) {
     var wifin = results.features[i]; 
        var coords = wifin.geometry.coordinates; 
        var latLng = new google.maps.LatLng(coords[0],coords[1]); 
        var magnitude = wifin.properties.SignalStrength;
    var weightedLoc = {
      location: latLng,
      weight: Math.pow(2, magnitude)
    };
    heatmapData.push(weightedLoc);
  }
     var heatmap = new google.maps.visualization.HeatmapLayer({
      //position: latLng,
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

这会切换Google Earthquake example中的热图（如果我将“热图”变量设为全局变量以及地图）

<input type="button" id="toggle" value="toggle layer" onclick="if (heatmap.getMap() == null) {heatmap.setMap(map) } else {heatmap.setMap(null)}"></input>

working example

在不同的叠加层之间切换（谷歌地图）

1 个答案: