1

ここにコーディング全体を追加しました。地震の視覚化チュートリアルに基づいてプロジェクトを構築したため、それらは皆さんと似ているかもしれません。チュートリアルはとても良かったのですが、今のところ、ボタンまたはチェック ボックスのいずれかを取得して、異なるオーバーレイを切り替えようとしています。

コードを 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>
4

1 に答える 1

0

これは、Google地震の例でヒートマップを切り替えます（「ヒートマップ」変数をマップだけでなくグローバルにすると）

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

実施例

于 2013-10-06T18:19:26.883 に答える