我最近使用 API 的 V3 版本（最新版本）创建了一个谷歌地图。我的一个要求是能够以合理的时间内渲染超过 1 百万个标记，这样的时间应该在 15 秒之内。
我知道一次性渲染所有 1 百万个标记是相当不可行的，因此我研究了性能选项。我找到并使用了 MarkerClusterer 这个选项：https://developers.google.com/maps/articles/toomanymarkers
然而，我现在开始在测试使用超过 100,000 个标记时出现性能问题，渲染地图和标记需要很长时间（超过 1 分钟）。最终，我设法使页面崩溃，大约有 200,000 个标记。
是否有任何方法可以在使用这么多标记时提高地图的性能？
非常感谢您的帮助。
我成功使用了Google Fusion Tables，它非常快速和简单 - 一旦你弄清楚如何使用OAuth2....
这些表格每个限制为100,000条目，您可以通过CSV文件上传它们 - 要么通过在浏览器中转到您的Google Drive，要么使用curl或Perl进行程序化操作。
要超越100,000个元素的限制，您可以向地图添加5个图层，但仍然只能达到500,000个点。无法提供更多建议。
如果您想看一下，我的项目在这里。
另一个选择是热力图。
https://developers.google.com/maps/documentation/javascript/heatmaplayer
有些事情我必须提醒自己（我注意到原始问题是来自2014年），那就是JavaScript很快。实际上，经常当我认为JS有问题时，其实往往是DOM的问题。
在2022年，在一个常量中保存1,000,000个数据点并不算不合理。然后问题就变成了渲染问题。我发现，热力图只要数据不变，就可以非常快速地渲染。
不过，即使到了2022年，我也难以相信您可以在不到15秒的时间内加载1,000,000条记录。我想，如果用户登录仪表板并开始异步加载，一旦用户到达页面，它会看起来比较快。许多聪明的应用程序在幕后聪明地预加载，利用了速度感知。
使用这种技术的方法是为当前边界+ 100英里半径呈现标记/热力图。然后随着用户的缩放/拖动，您可以按需切分1,000,000个项目数组。
/**
* A lot of assumptions are being made about the backend. There are various
* technics you can use to speed up loading, my favorite being MongoDB and
* $geoWithin and loading multiple pages at the same time.
*/
(async function () {
let Points = [];
let Bounds = {};
let Map;
let Heatmap;
let BoundTimeout;
async function getPoints(page = 1) {
let response;
try {
response = await fetch(myRestUrl, { body: JSON.stringify(Bounds) });
} catch (e) {
console.error(e);
}
/**
* If you pass in page, you can return a total in the response. Then, based
* on your perpage setting you can deduce the total number of pages you
* need. Throw that in a for loop and add to your Points array.
*
* In this example, assuming one phat response...
*/
if (response) {
Points = response;
}
}
function generateGoogleMap() {
// Assumes your map is #map.
Map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(37.782, -122.447),
zoom: 13,
mapTypeId: 'satellite',
});
Map.addListener('bounds_changed', BoundChange);
BoundChange();
}
function BuildHeatmap() {
if (Heatmap) {
Heatmap.setMap(null);
Heatmap = null;
}
Heatmap = new google.maps.visualization.HeatmapLayer({
// Assuming you're storing your points as GeoJSON...
data: Points.map(
(P) => new google.maps.LatLng(P.coordinates[1], P.coordinates[0])
),
});
Heatmap.setMap(Map);
}
/**
* Populates the Bounds variable with a GeoJSON rectangle for Point lookup.
*/
function BoundChange() {
clearTimeout(BoundTimeout);
const MapBounds = Map.getBounds();
const sw = MapBounds.getSouthWest();
const ne = MapBounds.getNorthEast();
Bounds = {
type: 'Polygon',
coordinates: [
[
[sw.lng(), sw.lat()],
[ne.lng(), sw.lat()],
[ne.lng(), ne.lat()],
[sw.lng(), ne.lat()],
[sw.lng(), sw.lat()],
],
],
};
BoundTimeout = setTimeout(async () => {
await getPoints();
BuildHeatmap();
}, 1000);
}
/**
* Preload the Points. Ideally this would be on an event, state, or tick
* system but for symplicity we're just waiting for the results.
*/
await getPoints();
// Generate the Map.
generateGoogleMap();
})();