Javascript 谷歌地图API-未定义热图（地图显示但无法更改）

在第二个版本的热图系统，我正在使用谷歌地图api

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

因此，我改变了原始代码，改为调用一个php脚本（使用表单的序列化版本），该脚本以JSON格式返回查询，只要一开始就可以得到一个空白映射，可以选择一些设置，它将加载热图，可以更改这些设置，它将生成一个新的热图（它在旧的热图上分层）所以，我们已经通过了如何删除以前的热图，并击中砖墙

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

完整的代码相当大，所以希望能涵盖这些代码段中的所有内容

初始地图加载

  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
})
}
};

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

---

热图当前位于

xmlhttp.onreadystatechange

函数的本地，您无法在该函数之外访问它。您需要在该函数之外声明它（全局范围起作用，如

map

变量），然后您可以访问它以在以后修改它（或在对AJAX请求的下一次调用中）

var热图；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var heatmapData=[]；
myObj=JSON.parse（this.responseText）；
对于（变量i=0；i

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

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

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
    })
  }
};