Question

我有使用Google热图API的热图。它有时工作，因为我需要刷新多次并执行绘制热图方法，然后热图将会出现。我在html页面中包含了脚本标记：

<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true&libraries=visualization,geometry"></script>

这是我初始化地图的部分：

$( document ).ready(function() {
function initialize() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(1.352083,103.819836),
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

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

当我的按钮显示热图按钮是onClick时，我正在使用此功能绘制热图：

var heatmap;
function plotEventHeatMap(){
var jsonArray = [];
 $.ajax({
        url: "/Together/TogetherServlet?action=GetEvents",
        type: "GET",
        data: "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $.each(data, function (i, jsondata) {
                var jsonObject = {};
                jsonObject.xcoord = jsondata.xcoord;
                jsonObject.ycoord = jsondata.ycoord;  
                jsonArray.push(new google.maps.LatLng(jsonObject.ycoord, jsonObject.xcoord));
            });
        }
 });

 var pointArray = new google.maps.MVCArray(jsonArray);

 heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    map: map,
    radius: 40,
    gradient: gradient
 });

 heatmap.setMap(map);
 }

使用这些代码，热图工作正常。只是有时我必须重复刷新浏览器并多次点击绘制热图按钮以显示热图。

我想知道哪一部分导致了这一点。提前谢谢。

Answer 1

您的ajax调用是异步调用。您的应用程序向"/Together/TogetherServlet?action=GetEvents"发出请求，但脚本继续运行，并在请求返回任何实际数据之前实例化热图，因此您正在创建一个带有空jsonArray的Heatmap。这里的解决方案是在ajax成功处理程序中实例化热图。

$.ajax({
        url: "/Together/TogetherServlet?action=GetEvents",
        type: "GET",
        data: "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $.each(data, function (i, jsondata) {
                var jsonObject = {};
                jsonObject.xcoord = jsondata.xcoord;
                jsonObject.ycoord = jsondata.ycoord;  
                jsonArray.push(new google.maps.LatLng(jsonObject.ycoord, jsonObject.xcoord));
            });
            var pointArray = new google.maps.MVCArray(jsonArray);
            heatmap = new google.maps.visualization.HeatmapLayer({
                data: pointArray,
                map: map,
                radius: 40,
                gradient: gradient
            });
        }
 });

此外，您并不需要在每个函数调用上实例化新的热图。我建议只刷新其数据

var heatmap = new google.maps.visualization.HeatmapLayer({
                 data: [],
                 map: null,
                 radius: 40,
                 gradient: gradient
              });

function updateHeatmap(){
    heatmap.setMap(null);    
    var jsonArray = [];
    $.ajax({
        url: "/Together/TogetherServlet?action=GetEvents",
        type: "GET",
        data: "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $.each(data, function (i, jsondata) {
                var jsonObject = {};
                jsonObject.xcoord = jsondata.xcoord;
                jsonObject.ycoord = jsondata.ycoord;  
                jsonArray.push(new google.maps.LatLng(jsonObject.ycoord, jsonObject.xcoord));
            });
            var pointArray = new google.maps.MVCArray(jsonArray);
            heatmap.setData(pointArray);
            heatmap.setMap(map);
        }
    });
}

Google地图热图API需要多个触发器才能显示热图

1 个答案: