Angular2 GMap приложение очень медленно, даже с нулевыми маркерами - PullRequest
Новая
       13

Angular2 GMap приложение очень медленно, даже с нулевыми маркерами

0 голосов
/ 10 апреля 2019

Я записал Angular2 GMap компонент в гораздо большее приложение стека MEAN - которое работает нормально, и я упомяну это только для более полной картины проекта - и сам GMap работает крайне медленно, даже с нулевыми маркерами создается.

Карта первоначально отображается через несколько секунд, которые я до сих пор записывал в режим разработки Angular, работающий медленнее, чем в процессе производства, но взаимодействие с пользователем методом перетаскивания и изменения масштаба занимает от десяти до двадцати секунд каждый, чтобы фактически перерисовать карту, до точки карты, непригодной для использования с точки зрения пользователя.

РЕДАКТИРОВАТЬ: В дополнительном тестировании, я заметил, что процессор на 100%, а карта увеличивается. Я нажимаю кнопку "+", чтобы увеличить, несколько файлов .png запрашиваются, процессор максимально на несколько секунд Затем карта, наконец, перерисовывается и снова готова принимать события. Это ключ?

РЕДАКТИРОВАТЬ2: Если я удаляю свой ключ API Google из тега скрипта в index.html, масштабирование происходит быстрее и работает, как и ожидалось. Перетаскивание по-прежнему работает недостаточно хорошо, чтобы его можно было использовать: 

<!--<script src="https://maps.googleapis.com/maps/api/js?key=MyKEY"></script>-->
<script src="https://maps.googleapis.com/maps/api/js"></script>

Это какое-то ограничение на мой ключ API? Конечно, если использовать этот способ, карта имеет наложение с надписью «только для целей разработки», поэтому удаление ключа не является ответом. END-EDIT2

РЕДАКТИРОВАТЬ3: Следуя нескольким различным примерам быстрого запуска, я изменил код из исходной реализации ниже. Теперь нет наложения «разработка», масштабирование работает замечательно, но перетаскивание все еще очень медленное:

index.html: 

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY" async defer></script>

googlemap.component.ts: 

ngOnInit() {
    google.maps.event.addDomListener(window, 'load', this.initMap);
  }

  initMap() {
    const mapOptions = {
      center: new google.maps.LatLng(myLAT, myLONG),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.franchiseeLocationsMap = new google.maps.Map(document.getElementById('my-map'), mapOptions);
  }

Если честно, я не уверен, что здесь меняет дело. Теперь карта ожидает полной загрузки DOM перед инициализацией? Это противоречит тому, что я ожидал. Нужно ли мне добавить еще одного слушателя, чтобы обнаруживать перетаскивания карты и как-то реагировать? Теперь я ближе к решению, но больше смущен результатом! END-EDIT3

Вот чрезвычайно сжатый код, который я использую. Даже в этом очень простом состоянии карта вялая:

googlemap.component.ts: 

import { Component, OnInit } from '@angular/core';

declare const google: any;

@Component({
  selector: 'app-googlemap',
  templateUrl: './googlemap.component.html',
  styleUrls: ['./googlemap.component.css']
})
export class GoogleMapComponent implements OnInit {
  myMap: any;

  constructor() {
  }

  ngOnInit() {
    const mapOptions = {
      center: new google.maps.LatLng(myLAT, myLONG),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.myMap = new google.maps.Map(document.getElementById('my-map'), mapOptions);
  }
}

googlemap.component.html 

<div id="my-map"></div>

index.html 

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>

Поскольку этот код настолько скудный, а перемещение по карте очень медленное, я, должно быть, делаю что-то в корне неверное. Я следовал документации API карт Google и подтвердил несколько примеров в Интернете, использующих этот подход. Какие детали я ошибся?

...