Google Maps API - 未定义热图（地图显示但无法更改）答案

【问题标题】：Google Maps API - heatmap not defined (map displaying but cannot alter)Google Maps API - 未定义热图（地图显示但无法更改）
【发布时间】：2017-01-27 21:35:55
【问题描述】：

在我使用 google maps api 制作的热图系统的第二个版本上。

初始版本工作正常，但使用 PHP 和 MySQL 将点写入地图，这显示正常，然后可以使用 heatmap.set 更改地图（例如半径/不透明度）唯一的问题是您无法在不重新加载的情况下更改显示的热图（点被 PHP 有效地硬编码到脚本中）。

所以我改变了原始代码，改为调用一个 php 脚本（使用表单的序列化版本），它以 JSON 格式返回查询，这在开始时可以正常工作，可以选择一些设置和它会很好地加载热图，可以改变这些，它会做一个新的热图（它在旧热图的顶部）所以已经完成了如何删除以前的热图并撞到砖墙......

如果我尝试调用热图的任何函数。我得到“未定义热图”，这包括以前在旧地图中运行良好的所有功能。

完整的代码非常大，所以希望能涵盖这些 sn-ps 中的所有内容...

初始地图加载...

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: {lat: 51.514898, lng: -0.144432},
      mapTypeId: 'roadmap'
    });
  }

制作热图...

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    var heatmapData = [];
    myObj = JSON.parse(this.responseText);
    for (var i = 0; i < myObj.points.length; i++) {
    var latLng = new google.maps.LatLng(myObj.points[i].lat,myObj.points[i].lng);
    var pushData = {
            location: latLng,
            weight: myObj.points[i].weight
    }
    heatmapData.push(pushData);
    }
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData,
  maxIntensity: 10,
  radius:30,
  opacity: 0.4,
  map: map
})
}
};

表单提交调用...

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  url = "query.php?" + $( this ).serialize();
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
});

还有一个不起作用的示例函数（由带有 onchange 事件的滑块设置的值）...

  function changeOp(val) {
    heatmap.set('opacity', val);
  }

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

热图当前位于 xmlhttp.onreadystatechange 函数的本地，您无法在外部访问它。您需要在该函数之外声明它（全局范围有效，如 map 变量），然后您可以访问它以稍后修改它（或在下一次调用 AJAX 请求时）。

var heatmap;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var heatmapData = [];
    myObj = JSON.parse(this.responseText);
    for (var i = 0; i < myObj.points.length; i++) {
      var latLng = new google.maps.LatLng(myObj.points[i].lat, myObj.points[i].lng);
      var pushData = {
        location: latLng,
        weight: myObj.points[i].weight
      }
      heatmapData.push(pushData);
    }
    heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      maxIntensity: 10,
      radius: 30,
      opacity: 0.4,
      map: map
    })
  }
};

【讨论】：