Question

我正在使用此代码在两个不同的热图之间切换：

是否可以为每个出租车提供自己的风格e.g. two different gradients?

是否可以告诉e.g.

<button onclick="toggleHeatmap()">Toggle Heatmap</button>

选择了哪个taxidata？`

我使用以下代码：

<script>
window.onerror = function(){return true;}
  var map = null;
  var heatmap = null;
  var heatmap2 = null;
  var pointArray = null;
  var pointArray2 = null;
  var firstData = true;

  var taxiData = [
    <?
        foreach ($UserLocationHistory as $item) {
            echo "new google.maps.LatLng(" .$item['UserPosLat'] . ", " .$item['UserPosLong'] . "),";
        }

    ?>
  ]; 

var taxiData2 = [];
function initialize() {
    var mapOptions = {
      zoom: 13,
      center: new google.maps.LatLng('48.139581, 11.579585'),
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    };

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

    pointArray = new google.maps.MVCArray(taxiData);
    pointArray2 = new google.maps.MVCArray(taxiData2);

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: pointArray,
        radius: 25,
        opacity: 0.7,
    })

    heatmap.setMap(map);
    heatmap2.setMap(map);
}

在HTML中：

<div>
  <div id="panel">
    <button onclick="toggleHeatmap()" class="btn btn-info">Anzeige wechseln</button>
  </div>
  <div id="map_canvas" style="height:450px; width:100%;"></div>
</div>

Answer 1

这个toggleHeatmap()函数（基本上是从您引用的问题中复制和粘贴，但包括该函数的渐变）对我有用：

function toggleHeatmap() {
  if (firstData) {
    heatmap.setData(pointArray2);
    firstData = false;
  } else {
    heatmap.setData(pointArray);
    firstData = true;
  }
    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.setOptions({
    gradient: heatmap.get('gradient') ? null : gradient
  });
}

proof of concept fiddle

代码段

＆＃13;

function initialize() {
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(48.139581, 11.579585),
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  };

  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  pointArray = new google.maps.MVCArray(taxiData);
  pointArray2 = new google.maps.MVCArray(taxiData2);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    radius: 25,
    opacity: 0.7,
  })
  heatmap.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

function toggleHeatmap() {
  if (firstData) {
    heatmap.setData(pointArray2);
    firstData = false;
  } else {
    heatmap.setData(pointArray);
    firstData = true;
  }
  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.setOptions({
    gradient: heatmap.get('gradient') ? null : gradient
  });
}

var map = null;
var heatmap = null;
var heatmap2 = null;
var pointArray = null;
var pointArray2 = null;
var firstData = true;

var taxiData = [
  new google.maps.LatLng(48.239581, 11.579585),
  new google.maps.LatLng(48.139581, 11.679585),
  new google.maps.LatLng(48.339581, 11.779585),
  new google.maps.LatLng(48.139581, 11.879585),
  new google.maps.LatLng(48.239581, 11.479585),
  new google.maps.LatLng(48.139581, 11.379585),
  new google.maps.LatLng(48.239581, 11.279585),
  new google.maps.LatLng(48.139581, 11.179585),

];

var taxiData2 = [
  new google.maps.LatLng(48.139581, 11.579585),
  new google.maps.LatLng(48.239581, 11.679585),
  new google.maps.LatLng(48.139581, 11.779585),
  new google.maps.LatLng(48.339581, 11.879585),
  new google.maps.LatLng(48.139581, 11.479585),
  new google.maps.LatLng(48.239581, 11.379585),
  new google.maps.LatLng(48.139581, 11.279585),
  new google.maps.LatLng(48.239581, 11.179585),
];

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<div>
  <div id="panel">
    <button onclick="toggleHeatmap()" class="btn btn-info">Anzeige wechseln</button>
  </div>
  <div id="map_canvas" style="height:450px; width:100%;"></div>
</div>

＆＃13;

在Google Heatmap中的数据之间切换时更改样式

1 个答案: