谷歌地图Javascript API移动性能问题_Javascript_Android_Performance_Mobile_Google Maps Api 3

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

javascript android performance mobile google-maps-api-3

谷歌地图Javascript API移动性能问题,javascript,android,performance,mobile,google-maps-api-3,Javascript,Android,Performance,Mobile,Google Maps Api 3,我正在尝试使用GoogleMapsJavaScriptAPIv3构建一个移动应用程序。从功能上讲，它做得很好，但在中间件Android设备（使用三星Galaxy 3进行测试）上的性能非常缓慢。我还检查了官方网站的性能，得到了相同的结果，并使用了。是否有任何我可能错过的特定于移动设备的步骤（请参阅示例代码），或者Javascript API性能仅限于此级别，在这种情况下无法避免构建本机应用程序非常感谢您的回答以下是链接页面的代码： <!DOCTYPE html> <html

我正在尝试使用GoogleMapsJavaScriptAPIv3构建一个移动应用程序。从功能上讲，它做得很好，但在中间件Android设备（使用三星Galaxy 3进行测试）上的性能非常缓慢。我还检查了官方网站的性能，得到了相同的结果，并使用了。是否有任何我可能错过的特定于移动设备的步骤（请参阅示例代码），或者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>


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
函数初始化（）{
变量myOptions={
中心：新google.maps.LatLng（-34.397150.644），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
}

根据，您的代码是正确的。并对地图进行了优化

我建议：

尝试将脚本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>


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%；宽度：100%；}
函数初始化（）{
变量myOptions={
中心：新google.maps.LatLng（-34.397150.644），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

请在尝试演示-我对您的设备有疑问。如果官方演示工作缓慢，我认为没有很好的解决方案。

谷歌地图的性能在很大程度上取决于整个页面的结构

最大的性能损失通常来自页面的重新绘制/渲染周期，这是由加载/卸载平铺造成的

根据地图的放置方式和使用方式，使用position:fixed将地图元素定位在文档流之外是一个好处。位置：绝对也有帮助，但不如“固定”

我很想看看这个问题的答案！你试过把你的脚本和底部放进去吗？我认为使用它的本地应用程序不可能有那么好的性能，但我不能向你证明这一点。这更像是一种意见，而不是答案。祝你好运！：）也许这会有所帮助：当你说性能不好时，是因为加载时间太长还是一旦加载，交互就很慢？