我们在我们的 OpenLayers / ExtJS 应用程序中嵌入了谷歌地图街景。对于所有浏览器,它似乎都很快,除了 IE8,特别是在较慢的工作站中,它变得很慢并且平移根本不平滑。
所以,使用 IE8,我们去 maps.google.com ,询问街景,它工作正常。同一台机器,IE8,去我们的 ExtJS 应用程序并要求一个街景,它不是那么流畅,慢得多。同一台机器,火狐(甚至是IE9),就够流畅了。
一些想法:
- 看看 Firebug 和 Fiddler,似乎图像已正确缓存。所以看起来我们并没有要求太多的请求。我的意思是,即使我们根本不执行任何图像请求,平移仍然很慢。
- maps.google.com 不需要像我们的应用程序那样进行身份验证,但由于前面的原因,我认为这不是问题所在。
- 无论我们移除额外的标记还是移除包含街景小人的地图,它都很慢。
- 即使窗口大小不太大,也会发生这种情况。也就是说,比我们使用 maps.google.com 进行测试的窗口要小
- 在我们的应用程序中使用街景视图平移大约 30% 时,我可以看到 CPU 使用率,使用 maps.google.com 平移 15%
我们使用的代码与示例没有太大区别:
https://developers.google.com/maps/documentation/javascript/examples/streetview-simple
任何想法将不胜感激。谢谢。
更新。为了简化问题,我尝试摆脱 ExtJS。所以我只用下面的简单 HTML 打开另一个窗口。即使这样,它的性能也比仅仅访问 maps.google.com 还要糟糕。
<html><head><meta charset='utf-8'><title>Street View controls</title><style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script><script> function initialize() { var fenway = new google.maps.LatLng(51.48661637238365,-0.18295272897127387); var panoOptions = { position: fenway, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER }, linksControl: false, panControl: false, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, enableCloseButton: false}; var panorama = new google.maps.StreetViewPanorama( document.getElementById("map-canvas"), panoOptions);}google.maps.event.addDomListener(window, "load", initialize); </script> </head> <body> <div id="map-canvas"></div </body></html>