0
expressとnodejsを使用して、lat/lonに加えてたくさんの属性を含む35000データポイントのページを提供し、google map api（ヒートマップ） 。 localhostでホストされている場合、マップが正しくレンダリングされます。しかし、リモートサーバー上でホストされている場合はマップが表示されません。 実際にオブジェクトの大部分が<script> *** </script>にレンダリングされたということは、私が実際にサーバーから35000のデータを取得したことを意味します。しかし、Googleのjavascript APIはロードされていないので、マップは出てこない。Google map apiは大きなデータのページに読み込まれません（26MB）
私がした可能性と対策はいくつかあります。しかし、彼らのうちどれもうまくいきませんでした
- pm2サーバーは大きなページ（26MB）を処理できません。しかし、それはlocalhostで行います。
- サーバサイドの接続タイムアウト。リモートからの送信に時間がかかり、ローカルホストで動作します。しかし、私は
pm2 start server.js --kill-timeout 30000を使用しましたが、それはまだ動作しません。 - ブラウザ接続タイムアウトが発生しました。 Safariでは、5.5秒後にメッセージ
Failed to load resource: The network connection was lost.が表示され、エラーメッセージは表示されません。ネットワークマネージャーはNetwork Debugのようなものです。
ご意見やご感想をお寄せください。どうも！
Nodejs /特急サーバー：
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>