Проблема с производительностью мобильных приложений в Google Maps Javascript

Я пытаюсь создать мобильное приложение, используя API Javascript Google Maps v3. Функционально это прекрасно, но производительность действительно вялая на промежуточных устройствах Android (используется для тестирования Samsung 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>

Ответы

Ответ 1

Согласно официальной документации ваш код прав. Оптимизированы карты.

Я предлагаю:

  • Попробуйте изменить URL script на 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/ - Я сомневаюсь в вашем устройстве. Если официальные демонстрации работают медленно, я не думаю, что есть неплохое решение.

Ответ 2

Производительность карт Google очень ОЧЕНЬ зависит от того, насколько хорошо структурирована вся страница.

Самый большой удар производительности обычно происходит из циклов перерисовки/рендеринга страницы, вызванных загрузкой/разгрузкой плиток.

В зависимости от того, как размещена карта и как вы ее используете, полезно позиционировать элемент карты с использованием позиции: фиксированный, выведя ее из потока документов. Позиция: абсолютная также может помочь, но не так сильно, как "фиксированная".