Google Maps Javascript API 移动性能问题
Posted
技术标签:
【中文标题】Google Maps Javascript API 移动性能问题【英文标题】：Google Maps Javascript API mobile performance issue 【发布时间】：2012-02-09 16:30:08 【问题描述】：我正在尝试使用 Google Maps javascript API v3 构建移动应用程序。在功能上，它表现不错，但在中间件 android 设备上性能确实很慢（使用三星 Galaxy 3 进行测试）。 我还检查了官方http://maps.google.com 的性能，得到了相同的结果，并且也使用了first example code。是否有任何移动特定的步骤，我可能错过了（参见示例代码），或者 Javascript API 性能仅限于此级别，在这种情况下无法避免构建原生应用程序？
非常感谢您的回答！
这是链接页面的代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html height: 100%
body height: 100%; margin: 0; padding: 0
#map_canvas height: 100%
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize()
var myOptions =
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
【问题讨论】：
很想在这个问题上看到某种答案！ 你试过把你的脚本和底部放在一起吗？ 我认为使用它的本机应用程序的性能是不可能的，但我无法向你证明这一点。这更像是一个意见而不是一个答案。祝你好运！ :) 也许这会有所帮助：***.com/questions/875678/… 当你说性能不好时，是加载时间太长还是加载后交互迟缓？ 【参考方案1】：根据official documentation，您的代码是正确的。并且地图已经过优化。
我建议：
-
尝试将脚本 URL 更改为
http://maps.googleapis.com/maps/api/js?sensor=false
在页面末尾加载脚本。
例子：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html height: 100%
body height: 100%; margin: 0; padding: 0
#map_canvas height: 100%; width: 100%;
</style>
</head>
<body>
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize()
var myOptions =
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
在http://fiddle.jshell.net/tomasdev/8FhYz/show/light/ 上试用演示 - 我对您的设备有疑问。如果官方demo运行缓慢，我认为没有一个很好的解决方案。
【讨论】：
【参考方案2】：Google 地图的性能在很大程度上取决于整个页面的结构。
最大的性能损失通常来自页面的重绘/渲染周期 - 由图块加载/卸载引起。
根据地图的放置方式和使用方式，使用 position:fixed 定位地图元素是有好处的，将其从文档流中取出。 Position:absolute 也有帮助，但不如“固定”。
【讨论】：
以上是关于Google Maps Javascript API 移动性能问题的主要内容，如果未能解决你的问题，请参考以下文章
在 typescript/javascript 的 google.maps.Geocoder().geocode() 上使用全局变量
Google Maps JavaScript API 警告：NoApiKeys
Google Maps Javascript API、DirectionsService、国家列表