谷歌地图API不会加载到包含大量数据的页面中（26MB）

我使用nodejs和express来为包含35000个数据点的页面提供服务，这些数据点除了使用纬度/经度，还包括大量属性，使用谷歌地图API（热图）。它在localhost中托管时正确呈现地图。但是，如果托管在远程服务器上，地图甚至不会显示出来。大部分实际在<script> *** </script>中渲染的对象意味着我真的从服务器获得了35000个数据。但谷歌的JavaScript API没有加载，所以地图不出来。谷歌地图API不会加载到包含大量数据的页面中（26MB）

我做了一些可能性和措施。但他们都没有解决。

pm2服务器无法提供大页面（26MB）。但它在localhost中。
服务器端连接超时，因为从远程服务需要更长时间，并且它在localhost中工作。但是我用pm2 start server.js --kill-timeout 30000它仍然不起作用。
浏览器连接超时。在Safari上，我在5.5秒之后收到消息Failed to load resource: The network connection was lost.，而在Chrome中没有错误消息。网络管理员就是这样的Network Debug。

任何帮助/想法，将不胜感激。谢谢！

的NodeJS/Express服务器：

app.get('/map', (req, res) => { 
     let queryData = `select * from table;`; 
     let dataPromise = sequelize.query(queryData, {type: sequelize.QueryTypes.SELECT}); 

     dataPromise.then(data => { 
      res.render('map/map.hbs', {data: JSON.stringify(data)}); 
     }); 

    });

HBS客户：

<div id="map"></div> 
<script> 
    var map; 

    function initMap() { 
     var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523); 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: sanFrancisco, 
      zoom: 13 
     }); 

     var heatmap = new google.maps.visualization.HeatmapLayer({ 
      dissipating: true, 
      maxIntensity: 10, 
      radius: 5, 
      opacity: 0.9, 
     }); 

     plot_heatmap(heatmap, {{{data}}}); 
    } 

    function plot_heatmap(heatmap, json_data){ 
     heatmap.setMap(null); 
     let bounds = new google.maps.LatLngBounds(); 

     let heatmapData = json_data.map(element => { 
      loc = new google.maps.LatLng(element.lat, element.lon); 
      bounds.extend(loc); 
      return new google.maps.LatLng(element.lat, element.lon); 
     }); 

     map.fitBounds(bounds);  // auto-zoom 
     map.panToBounds(bounds);  // auto-center 

     heatmap.data = heatmapData; 

     heatmap.setMap(map); 
    } 

</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap&&libraries=visualization" 
     async defer></script> 
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

来源

2017-08-26 Yen

仍然不知道哪一部分是问题。

所以我最终做了分页多个ajax请求，以减少一次页面加载，它的工作原理。

来源

2017-09-06 01:36:20 Yen

谷歌地图API不会加载到包含大量数据的页面中（26MB）

回答

相关问题