Question

我已经将angular2 GMap组件写入了一个更大的MEAN堆栈应用程序中-该程序运行良好，而我只是为了更完整地了解该项目而提及它-而且即使使用零标记，GMap本身的运行速度也极慢正在创建。

地图最初会在几秒钟后显示，到目前为止，我认为Angular开发模式的运行速度比生产速度要慢，但是Drag和Zoom用户交互每次要花10到20秒才能真正重绘地图，从用户的角度来看，该地图无法使用。

编辑：在其他测试中，我注意到地图放大时CPU处于100％的状态。我按下“ +”按钮进行放大，请求了多个.png文件，CPU持续运行了几秒钟，然后最终重新绘制地图，并准备再次接受事件。这是一个线索吗？

EDIT2：如果我从index.html的脚本标记中删除了我的google API密钥，则缩放速度更快，并且可以按预期运行。拖动仍然无法很好地工作以使其可用：

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

EDIT3：以下是一些不同的快速入门示例，我从下面的原始实现中修改了代码。现在没有“开发”叠加层，缩放效果非常好，但是拖动仍然非常缓慢：

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完全加载？这与我的预期有悖常理。我是否需要在某个地方添加另一个侦听器以检测地图拖动并以某种方式做出反应？现在我已经接近解决方案，但是 more 对结果感到困惑！ 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>

由于此代码太精简并且在地图上移动太慢，因此我必须做一些根本上错误的事情。我遵循了google maps api文档，并在网上确认了使用此方法的几个示例。我弄错了哪些细节？

即使使用零标记，Angular2 GMap应用的运行速度也非常慢

0 个答案: