我在使用 Google Maps v3 API 时遇到了严重的性能问题，但在搜索此问题时找不到任何类似的情况。这个问题可以在任何浏览器上看到，但我在这里专注于 Chrome。
症状：
当我缩放地图或移动地图时，FPS 速率急剧下降，导致非常糟糕的体验。
我的代码：
我使用他们的文档中提供的最简单的示例来实现 Google Map。
症状：
当我缩放地图或移动地图时，FPS 速率急剧下降，导致非常糟糕的体验。
我的代码：
我使用他们的文档中提供的最简单的示例来实现 Google Map。
<!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%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>我所做的测试:
首先，访问https://maps.google.com并尝试使用缩放功能（使用鼠标滚轮），结果非常好。一切都很流畅，FPS速率为60 fps。 在我的测试中，我打开了官方的谷歌地图网站和我的小例子页面，并进行了以下操作：
在Chrome开发控制台中启用“显示FPS计数器”。以下是在20秒内对原始网站和我的网站进行缩放的过程中拍摄的两个屏幕截图。
请注意，原始的谷歌地图网站似乎根本没有使用GPU内存，而我的网站则极度使用它。实际上，在拍摄屏幕截图的时候，GPU内存为146 MB，但这在0-200MB之间波动速度非常快。
接下来我做的是在Chrome的开发控制台中启用Paint Flashing功能，它显示了重新绘制的矩形。我再次放大和缩小地图并截屏：
在这里，很明显我的网站试图仅重绘正在更改的内容，而原始的谷歌地图网站总是重绘整个图片。无论我缩放多长时间，原始网站都会重新绘制整个图片，并且根本不使用GPU内存。
现在我的问题:
有没有人遇到过类似的行为，是否有任何方法（可能是一些设置），让我也可以像谷歌在他们的网站上所做的那样呈现地图？我的特定用例使我无法使用谷歌地图以我正在经历的性能。