Проблема с мобильным приложением Google Maps Javascript API - PullRequest
Новая
       18

Проблема с мобильным приложением Google Maps Javascript API

17 голосов
/ 13 января 2012

Я пытаюсь создать мобильное приложение, используя Google Maps Javascript API v3. Функционально все в порядке, но производительность на устройствах Android с промежуточным программным обеспечением очень низкая (для тестирования использовалась Samsung Galaxy 3). Я также проверил производительность на официальном http://maps.google.com, с тем же результатом, а также с использованием первого примера кода . Есть ли какие-либо конкретные шаги для мобильных устройств, которые я мог бы пропустить (см. Пример кода) или производительность API Javascript ограничена этим уровнем, и в этом случае нельзя избежать создания собственного приложения?

Большое спасибо за ответы!

Вот код связанной страницы: 

<!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>

Ответы [ 2 ]

8 голосов
/ 29 июня 2012

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

Я предлагаю:

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

0 голосов
/ 18 августа 2017

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

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

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

...