Google Maps Javascript API 移动性能问题答案

【问题标题】：Google Maps Javascript API mobile performance issueGoogle Maps Javascript API 移动性能问题
【发布时间】：2023-03-31 01:31:01
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

很想在这个问题上看到某种答案！
你试过把你的脚本和底部放在一起吗？
我认为使用它的本机应用程序的性能是不可能的，但我无法向你证明这一点。这更像是一个意见而不是一个答案。祝你好运！ :)
也许这会有所帮助：stackoverflow.com/questions/875678/…
当你说性能不好时，是加载时间太长还是加载后交互迟缓？

标签： javascript android performance mobile google-maps-api-3

【解决方案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 也有帮助，但不如“固定”。

【讨论】：