Gmaps MVCArray熱圖問題

Question

我有一個問題，從Gmaps的MVCArray和熱圖： 我有一個帶有GPS座標的JSON文件。這些數據按文件中的月份/年份分組。我有27000個座標。 你必須點擊「播放」，它每秒從文件加載數據。 當MVCArray的長度約爲11000時，所有標記從地圖上消失。 你知道爲什麼嗎？我在這個問題上2周

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文件加載數據，你可以把下面的檢查，以確定是否指定緯度/經度值：

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和經度值被指定

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

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

<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'/>