Gmaps MVCArray热图问题

Question

我遇到了来自Gmaps的MVCArray和Heatmap的问题： 我有一个带GPS坐标的JSON文件。此数据按文件中的月/年分组。我有27000个坐标。 你必须点击“播放”，它每秒从文件加载数据。 当MVCArray的长度约为11000时，所有标记都会从地图中消失。 你知道为什么吗 ？我在这个问题上待了两个星期

http://jsfiddle.net/mem8654L/4/

var map, heatmap, dataMVC;
var source = {};
var keyStore = [];
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: {lat: 48.83790981, lng: 2.2971},
        mapTypeId: google.maps.MapTypeId.SATELLITE
    });

   dataMVC = new google.maps.MVCArray([]);
   heatmap = new google.maps.visualization.HeatmapLayer({
       data: dataMVC,
       map: map
   });
}
function update(id){
    source[id].forEach(function(val){
        dataMVC.push(new google.maps.LatLng(Number(val.lat),    Number(val.lon)));

    });
    console.log(dataMVC.getLength());
  }  

  function play(){
      var i=-1;
      (function f(){
          i = (i + 1) ;
      if (i>keyStore.length){
          clearInterval(intervalid);
      }
      update(keyStore[i]);
      var intervalid = setTimeout(f, 1000);
  })();
}

感谢您的帮助

Answer 1

此行为与从fullDatagps.json文件加载的损坏的数据有关，您可以进行以下检查以确定是否指定了lat / lng值：

 source[id].forEach(function (val) {

        if(val.lat.length == 0 || val.lon.length == 0) { 
            console.log('Incorrect lat/lng');
        }
        else {
           var curLat = Number(val.lat);
           var curLng = Number(val.lon);
           dataMVC.push(new google.maps.LatLng(curLat, curLng));    
        }

    });

示例

以下示例演示如何呈现所有指定了lat和lng值的数据点

＆＃13;

＆＃13;

var map, heatmap, dataMVC;
var source = {};
var keyStore = [];

$(document).ready(function () {
    $.getJSON("https://rawgit.com/guizmo51/c9c3b37c0946551a627d/raw/133be332e631b75673ffbddfd283e864ecbd184b/fullDatagps.json", function (data) {
        source = data;
        $.each(data, function (key, val) {
            keyStore.push(key);
        });

    });
});



function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: { lat: 48.83790981, lng: 2.2971 },
        mapTypeId: google.maps.MapTypeId.SATELLITE
    });
    dataMVC = new google.maps.MVCArray([]);
    heatmap = new google.maps.visualization.HeatmapLayer({
        data: dataMVC,
        map: map
    });
}
function update(id) {

    source[id].forEach(function (val) {


        if(val.lat.length == 0 || val.lon.length == 0) { /* lat/lng valued are missing? */
            console.log('Incorect lat/lon: (' + val.lat + ',' + val.lng + ')');
        }
        else {
           var curLat = Number(val.lat);
           var curLng = Number(val.lon);
           dataMVC.push(new google.maps.LatLng(curLat, curLng));    
        }

    });
    //console.log(dataMVC.getLength());
     document.getElementById('output').innerHTML = dataMVC.getLength();
}

function play() {
    var i = -1;
    (function f() {
        i = (i + 1);
        if (i >= keyStore.length) {
            clearInterval(intervalid);
        }
        update(keyStore[i]);
        var intervalid = setTimeout(f, 1000);
    })();
}

＆＃13;

 html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 90%;
        }

        #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto','sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

        #floating-panel {
            background-color: #fff;
            border: 1px solid #999;
            left: 25%;
            padding: 5px;
            position: absolute;
            top: 10px;
            z-index: 5;
        }

＆＃13;

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="map"></div>

    <button id="bouton" onclick="play();">Play</button>
    <script defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4jZqxf64-cmt0_v8UdBTq59PF60OLjMw&signed_in=true&libraries=visualization&callback=initMap"></script>
<div id='output'/>

＆＃13;

＆＃13;

＆＃13;