我需要有关在Google地图中加载大量数据点的帮助。我在这里有两个示例，两个示例都包含相似的数据集，其中一个包含大约25个数据点，这确实很好，但是当我增加数据点的数量时，图表的行为会异常并且无法呈现准确的数据。
以下是示例：
带有大量无法正常工作的数据点的示例：
var map, heatmap,infowindow;
var posMarkers = {};
var shopsdata = [
{
"shop_id": 1,
"shop_name": " Stammhaus",
"street": " Viktualienmarkt 8",
"postcode": "80331",
"city": " München",
"country": " Deutschland",
"revenue": 24124288,
"lat": 48.15,
"lng": 11.5833
}
];
var weightdata = [
{
"weight": 14,
"lat": 48.3,
"lng": 11.6167
},
{
"weight": 5,
"lat": 47.85,
"lng": 11.6
},
{
"weight": 4,
"lat": 48.0667,
"lng": 12.2333
},
{
"weight": 7,
"lat": 48.4667,
"lng": 11.1333
},
{
"weight": 11,
"lat": 47.75,
"lng": 11.7333
},
{
"weight": 7,
"lat": 47.9833,
"lng": 11.8667
},
{
"weight": 4,
"lat": 48.3667,
"lng": 11.3833
},
{
"weight": 4,
"lat": 47.8667,
"lng": 12.3333
},
{
"weight": 10,
"lat": 47.95,
"lng": 11.1
},
{
"weight": 12,
"lat": 48.5,
"lng": 11.5
},
{
"weight": 5,
"lat": 47.6833,
"lng": 11.5667
},
{
"weight": 51,
"lat": 48.0667,
"lng": 11.3667
},
{
"weight": 65,
"lat": 48.1,
"lng": 11.4
},
{
"weight": 3,
"lat": 48.35,
"lng": 10.9833
},
{
"weight": 9,
"lat": 47.7833,
"lng": 11.8333
},
{
"weight": 4,
"lat": 47.8667,
"lng": 12
},
{
"weight": 4,
"lat": 48.5833,
"lng": 13.4833
},
{
"weight": 5,
"lat": 47.8333,
"lng": 11.15
},
{
"weight": 3,
"lat": 48.2167,
"lng": 12.1333
},
{
"weight": 3,
"lat": 48.2618,
"lng": 12.2789
},
{
"weight": 3,
"lat": 48.4,
"lng": 10.8333
},
{
"weight": 3,
"lat": 48.6833,
"lng": 12.6833
},
{
"weight": 5,
"lat": 48.25,
"lng": 12.5333
},
{
"weight": 3,
"lat": 48.25,
"lng": 11.3667
},
{
"weight": 6,
"lat": 47.9833,
"lng": 11.4667
},
{
"weight": 19,
"lat": 48.05,
"lng": 11.9667
},
{
"weight": 3,
"lat": 47.9333,
"lng": 12.0167
},
{
"weight": 18,
"lat": 47.6446,
"lng": 11.7452
},
{
"weight": 5,
"lat": 48.4,
"lng": 11.4667
},
{
"weight": 3,
"lat": 47.8167,
"lng": 11.4833
},
{
"weight": 17,
"lat": 48.0833,
"lng": 11.8333
},
{
"weight": 3,
"lat": 47.7167,
"lng": 10.3167
},
{
"weight": 15,
"lat": 48.3,
"lng": 11.9127
},
{
"weight": 7,
"lat": 47.7667,
"lng": 11.6667
},
{
"weight": 5,
"lat": 48.1333,
"lng": 11.0333
},
{
"weight": 5,
"lat": 48.3167,
"lng": 11.5667
},
{
"weight": 25,
"lat": 47.9167,
"lng": 11.2833
},
{
"weight": 11,
"lat": 47.6833,
"lng": 11.2
},
{
"weight": 5,
"lat": 48.2667,
"lng": 10.9833
},
{
"weight": 6,
"lat": 47.9,
"lng": 11.7833
},
{
"weight": 19,
"lat": 48.0333,
"lng": 11.2
},
{
"weight": 5,
"lat": 48.4167,
"lng": 11.5333
},
{
"weight": 8,
"lat": 48.0667,
"lng": 11.9
},
{
"weight": 3,
"lat": 48.3167,
"lng": 11.2
},
{
"weight": 7,
"lat": 47.9167,
"lng": 11.6833
},
{
"weight": 8,
"lat": 47.8667,
"lng": 11.4
},
{
"weight": 14,
"lat": 47.9167,
"lng": 11.4167
},
{
"weight": 10,
"lat": 48.0833,
"lng": 11.9667
},
{
"weight": 23,
"lat": 48.0833,
"lng": 11.75
},
{
"weight": 5,
"lat": 47.8333,
"lng": 11.3
},
{
"weight": 5,
"lat": 48.3333,
"lng": 11.75
},
{
"weight": 5,
"lat": 47.8833,
"lng": 12.3333
},
{
"weight": 3,
"lat": 48.2667,
"lng": 10.8333
},
{
"weight": 6,
"lat": 48.1667,
"lng": 11.9167
},
{
"weight": 7,
"lat": 47.9,
"lng": 11.85
},
{
"weight": 3,
"lat": 48.8833,
"lng": 12.5667
},
{
"weight": 24,
"lat": 47.8833,
"lng": 11.7
},
{
"weight": 15,
"lat": 47.7333,
"lng": 11.55
},
{
"weight": 11,
"lat": 48.05,
"lng": 11.7
},
{
"weight": 72,
"lat": 48.05,
"lng": 11.7
},
{
"weight": 4,
"lat": 47.8333,
"lng": 11.7333
},
{
"weight": 3,
"lat": 48.2667,
"lng": 12.05
},
{
"weight": 15,
"lat": 48.05,
"lng": 11.5167
},
{
"weight": 19,
"lat": 48.1167,
"lng": 11.7833
},
{
"weight": 3,
"lat": 48.0833,
"lng": 10.8833
},
{
"weight": 3,
"lat": 48.0333,
"lng": 10.9167
},
{
"weight": 5,
"lat": 48.0167,
"lng": 10.6
},
{
"weight": 13,
"lat": 47.9667,
"lng": 11.65
},
{
"weight": 3,
"lat": 48.0167,
"lng": 11.8167
},
{
"weight": 3,
"lat": 47.7167,
"lng": 11.4167
},
{
"weight": 7,
"lat": 48.4,
"lng": 11.7333
},
{
"weight": 4,
"lat": 48.4,
"lng": 11.7333
},
{
"weight": 18,
"lat": 48,
"lng": 11.1833
},
{
"weight": 23,
"lat": 47.9667,
"lng": 11.35
},
{
"weight": 7,
"lat": 47.6446,
"lng": 11.7452
},
{
"weight": 3,
"lat": 47.5667,
"lng": 10.7
},
{
"weight": 3,
"lat": 48.3667,
"lng": 10.8833
},
{
"weight": 3,
"lat": 47.5,
"lng": 11.2833
},
{
"weight": 42,
"lat": 48,
"lng": 11.35
},
{
"weight": 7,
"lat": 47.9167,
"lng": 11.5167
},
{
"weight": 5,
"lat": 48.0167,
"lng": 11.6833
},
{
"weight": 6,
"lat": 47.8833,
"lng": 10.6167
},
{
"weight": 5,
"lat": 48.7667,
"lng": 11.4333
},
{
"weight": 3,
"lat": 48.7667,
"lng": 11.4333
},
{
"weight": 16,
"lat": 48.3167,
"lng": 11.6667
},
{
"weight": 16,
"lat": 47.5,
"lng": 11.1
},
{
"weight": 11,
"lat": 48.1167,
"lng": 11.7833
},
{
"weight": 3,
"lat": 48.6,
"lng": 11.7667
},
{
"weight": 9,
"lat": 48.1167,
"lng": 11.7833
},
{
"weight": 10,
"lat": 47.9,
"lng": 11.3667
},
{
"weight": 32,
"lat": 48.2667,
"lng": 11.4333
},
{
"weight": 11,
"lat": 47.9667,
"lng": 11.7833
},
{
"weight": 3,
"lat": 47.55,
"lng": 9.68333
},
{
"weight": 21,
"lat": 48.15,
"lng": 11.35
},
{
"weight": 26,
"lat": 48.1,
"lng": 11.7333
},
{
"weight": 4,
"lat": 47.75,
"lng": 11.3833
},
{
"weight": 22,
"lat": 48.1833,
"lng": 11.25
},
{
"weight": 3,
"lat": 47.7,
"lng": 10.35
},
{
"weight": 12,
"lat": 48.0667,
"lng": 11.25
},
{
"weight": 4,
"lat": 48.3833,
"lng": 11.4167
},
{
"weight": 5,
"lat": 48.3,
"lng": 11.4667
},
{
"weight": 113,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 62,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 33,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 59,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 90,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 48,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 322,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 153,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 39,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 45,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 58,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 57,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 67,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 87,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 45,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 37,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 41,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 78,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 44,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 62,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 61,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 58,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 76,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 55,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 57,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 68,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 38,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 42,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 9,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 20,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 12,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 32,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 22,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 19,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 33,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 39,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 37,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 40,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 28,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 61,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 88,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 24,
"lat": 48.1333,
"lng": 11.3667
},
{
"weight": 63,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 88,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 52,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 66,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 76,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 72,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 18,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 35,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 37,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 101,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 43,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 140,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 79,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 136,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 52,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 31,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 98,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 51,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 24,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 39,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 73,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 42,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 81,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 29,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 46,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 49,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 67,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 79,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 31,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 126,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 66,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 43,
"lat": 48.15,
"lng": 11.5833
},
{
"weight": 9,
"lat": 48.2167,
"lng": 11.8833
},
{
"weight": 3,
"lat": 47.7,
"lng": 11.4
},
{
"weight": 15,
"lat": 48.0167,
"lng": 11.4833
},
{
"weight": 3,
"lat": 48.5,
"lng": 11.5
},
{
"weight": 8,
"lat": 48.05,
"lng": 10.8667
},
{
"weight": 6,
"lat": 47.7333,
"lng": 11.8667
},
{
"weight": 14,
"lat": 47.95,
"lng": 11.4333
},
{
"weight": 11,
"lat": 48.2167,
"lng": 11.2667
},
{
"weight": 4,
"lat": 48.2,
"lng": 11.8
},
{
"weight": 5,
"lat": 48.3333,
"lng": 11.4833
},
{
"weight": 4,
"lat": 48.1167,
"lng": 11.0833
},
{
"weight": 3,
"lat": 48.25,
"lng": 11.1667
},
{
"weight": 90,
"lat": 48.05,
"lng": 11.5167
},
{
"weight": 33,
"lat": 48.1,
"lng": 11.4
},
{
"weight": 13,
"lat": 48.0167,
"lng": 11.7333
},
{
"weight": 3,
"lat": 47.8667,
"lng": 11.3
},
{
"weight": 3,
"lat": 47.7167,
"lng": 12.1333
},
{
"weight": 47,
"lat": 48.05,
"lng": 11.6333
},
{
"weight": 44,
"lat": 48.1333,
"lng": 11.3667
},
{
"weight": 3,
"lat": 48.0333,
"lng": 11.8833
},
{
"weight": 3,
"lat": 47.85,
"lng": 12.1333
},
{
"weight": 14,
"lat": 48.1667,
"lng": 11.7167
},
{
"weight": 11,
"lat": 48.0833,
"lng": 11.7167
},
{
"weight": 8,
"lat": 48.25,
"lng": 11.65
},
{
"weight": 21,
"lat": 48.05,
"lng": 11.6167
},
{
"weight": 4,
"lat": 47.6667,
"lng": 11.3667
},
{
"weight": 3,
"lat": 48.5361,
"lng": 12.1518
},
{
"weight": 12,
"lat": 47.8667,
"lng": 11.4667
},
{
"weight": 3,
"lat": 47.7333,
"lng": 12.1
},
{
"weight": 8,
"lat": 48.0333,
"lng": 11.0833
},
{
"weight": 9,
"lat": 48.0833,
"lng": 11.15
},
{
"weight": 7,
"lat": 47.9667,
"lng": 11.3
},
{
"weight": 78,
"lat": 48.1,
"lng": 11.45
},
{
"weight": 18,
"lat": 48.2,
"lng": 11.3333
},
{
"weight": 11,
"lat": 48.2167,
"lng": 11.4667
},
{
"weight": 4,
"lat": 48,
"lng": 11.8
},
{
"weight": 58,
"lat": 48.05,
"lng": 11.5333
},
{
"weight": 28,
"lat": 48.2333,
"lng": 11.6833
},
{
"weight": 3,
"lat": 48.1833,
"lng": 11.2833
},
{
"weight": 15,
"lat": 48.1833,
"lng": 11.2833
},
{
"weight": 3,
"lat": 47.9833,
"lng": 11.4667
},
{
"weight": 11,
"lat": 47.95,
"lng": 11.3
},
{
"weight": 6,
"lat": 48.05,
"lng": 11.0833
},
{
"weight": 10,
"lat": 48.1667,
"lng": 11.8167
},
{
"weight": 48,
"lat": 48.0333,
"lng": 11.6
},
{
"weight": 7,
"lat": 47.7167,
"lng": 11.7667
},
{
"weight": 25,
"lat": 48.2833,
"lng": 11.5667
},
{
"weight": 10,
"lat": 48.25,
"lng": 11.5667
},
{
"weight": 14,
"lat": 48.0833,
"lng": 11.2
},
{
"weight": 21,
"lat": 48.1833,
"lng": 11.75
},
{
"weight": 3,
"lat": 48.1333,
"lng": 11.2
},
{
"weight": 14,
"lat": 48.2,
"lng": 11.6467
},
{
"weight": 3,
"lat": 48.1167,
"lng": 11.1333
},
{
"weight": 3,
"lat": 49.3944,
"lng": 8.59611
},
{
"weight": 35,
"lat": 48.1167,
"lng": 11.7833
},
{
"weight": 29,
"lat": 48.0833,
"lng": 11.6833
},
{
"weight": 45,
"lat": 48.2,
"lng": 11.3667
},
{
"weight": 17,
"lat": 48.1,
"lng": 11.4667
}
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: shopsdata[0].lat,
lng: shopsdata[0].lng
},
mapTypeId: google.maps.MapTypeId.HYBRID
});
var locations = getLocationDataForHeapMap();
console.log(locations.length)
heatmap = new google.maps.visualization.HeatmapLayer({
data:locations ,
map: map,
radius : 20
});
}
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function toggleMarker() {
for (var i = 0; i < shopsdata.length; i++) {
if(posMarkers[i].getVisible()) {
posMarkers[i].setVisible(false);
}
else {
posMarkers[i].setVisible(true);
}
}
}
function getLocationDataForHeapMap() {
var locations = [];
for (var i = 0; i < weightdata.length; i++) {
var latlng = new google.maps.LatLng(weightdata[i].lat, weightdata[i].lng)
locations[i] = {
location: latlng,
weight: weightdata[i].weight
}
}
console.log(locations)
var icon = {
url: "https://comosaconnect.org/wp-content/uploads/2017/04/os_directory.png",
scaledSize: new google.maps.Size(30, 30),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(15, 15)
};
for (var i = 0; i < shopsdata.length; i++) {
var latlng = new google.maps.LatLng(shopsdata[i].lat, shopsdata[i].lng)
var marker = new google.maps.Marker({
map: map,
position: latlng,
title : shopsdata[i].shop_name,
info: "<DIV><STRONG>("+shopsdata[i].shop_id+")"+shopsdata[i].shop_name+"</STRONG><BR>"+
'Street: ' + shopsdata[i].street + '<BR>' +
'Postcode: ' + shopsdata[i].postcode + '<BR>' +
'City: ' + shopsdata[i].city + '<BR>' +
'Country: ' + shopsdata[i].country + '<BR>' +
'Revenue: ' + shopsdata[i].revenue + '<BR>' +
"</DIV>",
icon:icon,
visible : true
});
posMarkers[i] = marker;
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow();
infowindow.setContent(marker.info);
infowindow.open(map, this);
});
}
return locations;
}/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap">
</script>
请问是Google图书馆问题还是如何解决？