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

Я пытаюсь создать мобильное приложение с помощью API-интерфейсов Google Maps Javascript 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> 

Solutions Collecting From Web of "Проблема с производительностью мобильных приложений Javascript API Google Maps"

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

Я предлагаю:

  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> 

Попробуйте демонстрацию на http://fiddle.jshell.net/tomasdev/8FhYz/show/light/ – у меня есть сомнения относительно вашего устройства. Если официальные демонстрации работают медленно, я не думаю, что есть неплохое решение.

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

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

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