Question

Index.html

<script src="https://maps.googleapis.com/maps/api/js?ey=MYKEY&libraries=visualization" async defer></script>
<app-root></app-root>

map.component.ts

    import { Component, OnInit } from '@angular/core';
    import { HttpService } from '../http.service';
    import { } from '@types/googlemaps';

    declare var google: any;

    @Component({
        selector: 'app-map',
        templateUrl: './map.component.html',
        styleUrls: ['./map.component.css']
    })
    export class MapComponent implements OnInit {
        crimes = [];
        map: any;
        heatmap:any;

        constructor(private _httpService: HttpService) { }

      ngOnInit() {
        Cache = null;
          this.initMap();
        }
        initMap(){

          var chicago = { lat: 41.8974, lng: -87.6352 };
          location: new google.maps.LatLng(41.890, -87.632), weight: 1000 },
            { location: new google.maps.LatLng(41.890, -87.633), weight: 1000 },
          ];
          this.map = new google.maps.Map(document.getElementById('map'), {
            center: chicago,
            zoom: 16
          });
          var marker = new google.maps.Marker({ position: chicago, map: this.map });
}

让我知道是否需要更多信息。当我第一次加载页面时，地图不会加载任何问题。但是，当我使用ctrl + r，f5或单击“刷新”按钮刷新页面时，地图将无法加载，并且出现此错误：

MapComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: google is not defined
    at MapComponent.push../src/app/map/map.component.ts.MapComponent.initMap (map.component.ts:27)
    at MapComponent.push../src/app/map/map.component.ts.MapComponent.ngOnInit (map.component.ts:21)
    at checkAndUpdateDirectiveInline (core.js:9250)
    at checkAndUpdateNodeInline (core.js:10514)
    at checkAndUpdateNode (core.js:10476)
    at debugCheckAndUpdateNode (core.js:11109)
    at debugCheckDirectivesFn (core.js:11069)
    at Object.eval [as updateDirectives] (MapComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061)
    at checkAndUpdateView (core.js:10458)

但是，当我单击ctrl + f5时，地图不会加载任何问题。

有什么想法吗？

Angular + Google API-地图仅在新实例和ctrl + f5上加载

0 个答案: