javascript - 重新利用 map 标记进行加权热图

Question

我使用此函数通过 Ajax 获取标记，并将其绘制在 map_canvas div 中。这工作得很好，我正在尝试重用“gmarkers”变量来创建热图......但没有运气。如何使用这些数据创建热图？

我更喜欢使用与此函数加载的相同数据，通过变量对热图进行加权:llamados。

我该如何开始？

var gmarkers = [];
function initialize() {
    var myOptions = {
        zoom: 10,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    current_zoom = map.getZoom();
    var myControl = document.getElementById('descripcion');
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(myControl);
}

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

var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var marker, i;
var myLatLng;

function CreateMarker (obj, i) {
    myLatLng = new google.maps.LatLng(obj['lat'], obj['lon']);
    marker = new google.maps.Marker({
        position: myLatLng,
        animation: google.maps.Animation.DROP,
        title: obj['nodo'],
        llamados: obj['llamados'],
        icon: obj['icono'],
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent('Nodo: ' + obj['nodo'] + '; Llamados: ' + obj['llamados']);
            infowindow.open(map, marker);
        }
    })(marker, i));

    gmarkers.push(marker);
}

function ejecutarAjax(){
    $.ajax({
        beforeSend: function() {

        },
        cache: false,
        // data: params,
        dataType: 'json',
        timeout: 0,
        type: 'POST',
        url: 'traerLlamados.php',
        success: function(data) {
            if (data) {
                var data = data;
                var obj;
                cantidad=Object.keys(data).length;

                    for(var i in data){
                                CreateMarker(data[i]);
                         };
                    }

            else {
                alert('No data');
            }
        },
    });
}

Answer 1

根据您现有的代码，您应该能够通过执行以下操作向 map 添加热图(在加载标记后):

var heatmapArray = [];
for (var i=0; i<gmarkers.length; i++) {
  heatmapArray.push({location: gmarkers[i].getPosition(), weight: gmarkers[i].llamados});
}
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapArray
});
heatmap.setMap(map);

Proof of concept fiddle

代码片段:

var gmarkers = [];
var mapCenter = new google.maps.LatLng(37.782, -122.447);

function initialize() {
  var myOptions = {
    zoom: 15,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  current_zoom = map.getZoom();
  var myControl = document.getElementById('descripcion');
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(myControl);

  for (var i = 0; i < heatMapData.length; i++) {

    // Translate into obj expected by CreateMarker
    var obj = {
      lat: heatMapData[i].location.lat(),
      lon: heatMapData[i].location.lng(),
      nodo: "nodo" + i,
      llamados: heatMapData[i].weight,
      icono: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    }
    CreateMarker(obj, i);
  }
  var heatmapArray = [];
  for (var i = 0; i < gmarkers.length; i++) {
    heatmapArray.push({
      location: gmarkers[i].getPosition(),
      weight: gmarkers[i].llamados
    });
  }
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapArray
  });
  heatmap.setMap(map);
}

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

var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var marker, i;
var myLatLng;

function CreateMarker(obj, i) {
  myLatLng = new google.maps.LatLng(obj['lat'], obj['lon']);
  marker = new google.maps.Marker({
    position: myLatLng,
    animation: google.maps.Animation.DROP,
    title: obj['nodo'],
    llamados: obj['llamados'],
    icon: obj['icono'],
    map: map
  });
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent('Nodo: ' + obj['nodo'] + '; Llamados: ' + obj['llamados']);
      infowindow.open(map, marker);
    }
  })(marker, i));

  gmarkers.push(marker);
}

google.maps.event.addDomListener(window, "load", initialize);
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [{
  location: new google.maps.LatLng(37.782, -122.447),
  weight: 0.5
}, {
  location: new google.maps.LatLng(37.782, -122.445),
  weight: 1
}, {
  location: new google.maps.LatLng(37.782, -122.443),
  weight: 2
}, {
  location: new google.maps.LatLng(37.782, -122.441),
  weight: 3
}, {
  location: new google.maps.LatLng(37.782, -122.439),
  weight: 2
}, {
  location: new google.maps.LatLng(37.782, -122.437),
  weight: 10
}, {
  location: new google.maps.LatLng(37.782, -122.435),
  weight: 0.5
}, {
  location: new google.maps.LatLng(37.785, -122.447),
  weight: 3
}, {
  location: new google.maps.LatLng(37.785, -122.445),
  weight: 2
}, {
  location: new google.maps.LatLng(37.785, -122.443),
  weight: 5
}, {
  location: new google.maps.LatLng(37.785, -122.441),
  weight: 0.5
}, {
  location: new google.maps.LatLng(37.785, -122.439),
  weight: 1
}, {
  location: new google.maps.LatLng(37.785, -122.437),
  weight: 2
}, {
  location: new google.maps.LatLng(37.785, -122.435),
  weight: 3
}];

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,visualization"></script>
<div id="map_canvas"></div>