谷歌地图Javascript API移动性能问题

Zen*_*ima 17 javascript performance mobile android google-maps-api-3

我正在尝试使用Google Maps Javascript API v3构建移动应用程序.从功能上来说,它做得很好,但在中间件Android设备(使用三星Galaxy 3进行测试)上的性能确实很低.我还检查了官方http://maps.google.com上的性能,得到了相同的结果,并使用了第一个示例代码.是否有任何特定于移动设备的步骤,我可能已经错过了(请参阅示例代码),或者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>
Run Code Online (Sandbox Code Playgroud)

Tom*_*ero 8

根据官方文档,您的代码是正确的.并且地图已经过优化.

我建议:

  1. 尝试将脚本URL更改为 http://maps.googleapis.com/maps/api/js?sensor=false
  2. 在页面末尾加载脚本.

例:

<!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>
Run Code Online (Sandbox Code Playgroud)

试试http://fiddle.jshell.net/tomasdev/8FhYz/show/light/上的演示- 我对你的设备有疑问.如果官方演示工作缓慢,我认为没有一个很好的解决方案.