-1
JSを使用してGoogleマップに30,000の場所を表示したい。しかし、私のブラウザは応答しません。誰も私にいくつかのソリューションを提案することができます。私のコードは以下の通りです： -Googleマップの30,000の場所
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.loader {
border-top: 16px solid blue;
border-right: 16px solid green;
border-bottom: 16px solid red;
border-left: 16px solid pink;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="http://jquery-csv.googlecode.com/git/src/jquery.csv.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=nsddjfhjshfghjsdfgjhfhjfhvf&callback=initMap" async defer></script>
</head>
<body>
<div id="inputs" class="clearfix">
<input type="file" id="files" name="files[]" multiple />
</div>
<div id="map"></div>
<script>
var map;
function initMap() {
$(".map").hide();
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 28.6139, lng: 77.2090},
zoom: 5
});
}
$(document).ready(function() {
$('#files').bind('change', handleFileSelect);
});
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var file = files[0];
printTable(file);
}
function printTable(file) {
var reader = new FileReader();
reader.readAsText(file);
var markers = [];
reader.onload = function(event){
var csv = event.target.result;
var data = $.csv.toArrays(csv);
var temp;
for(var row in data) {
for(var item in data[row]) {
temp=data[row][item];
if (!temp.trim() || temp.trim() == null || temp.trim() =='') {
console.error("string empty");
}
else
{
//console.log(data[row][item]);
var array1 = JSON.parse(data[row][item]);
markers.push(array1);
delete this.array1;
}
}
}
showMarker(markers);
};
}
function showMarker(mark)
{
for(var array1 in mark) {
new google.maps.Marker({
position: {lat: mark[array1][1], lng: mark[array1][0]},
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 2,
fillColor: '#F44336',
strokeColor: '#F44336',
fillOpacity: 0.8,
strokeWeight: 0
},
map: map,
});
}
$(".map").show();
}
</script>
</body>
</html>
いずれかの提案が参考になります。 ありがとうございました！
ズームレベルに応じてマーカーをグループ化した後、ズームインされた領域に含まれているサブセットのみを表示していましたか？例：https://googlemaps.github.io/js-marker-clusterer/examples/simple_example.html – pawel
Pawelグループ化したくありません。すべてのマーカーが表示されるようにしたいので、密度をトラッキングできます地図にある。 – niks290192