Google Maps Javascript API 版本 3.54 破坏了 Angular Google Maps 13.2.2

问题描述 投票：0回答：1

2023 年 11 月 16 日，我开始在 Angular 应用程序中遇到 Google 地图问题。 Google 地图抛出 403 错误，并且地图未加载（显示空白页面）。虽然我的 API 密钥是有效的。

以下是我的 Angular 和系统应用程序的配置：

  • 应用程序角度版本：~13.1.0
  • Angular CLI 版本：13.1.4
  • 节点版本：16.14.0
  • NPM版本：8.3.1
  • 操作系统：win32 x64

错误图片：

代码：

index.HTML：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Map Issue</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://maps.googleapis.com/maps/api/js?key=API_Key"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Google 地图组件： HTML：

<!--start:Map-->
<google-map class="map" height="95vh" width="100%">
    <!--start:Map Markers-->
    <map-marker *ngFor="let site of sites"
                [position]="{ lat: site.lat, lng: site.lng }"
                [options]="{}"
                (mapClick)="displaySiteDetails(site)">
    </map-marker>
    <!--end:Map Markers-->
</google-map>
<!--end:Map-->

TS

import { Component, OnInit, ViewChild } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { GoogleMap } from '@angular/google-maps';
import { SitesService } from '../core/services/sites.service';

@Component({
  selector: 'app-google-map',
  templateUrl: './google-map.component.html',
  styleUrls: ['./google-map.component.scss']
})
export class GoogleMapComponent implements OnInit {

  sites = [
    {
      "siteDisplayName": "Site Name",
      "streetAddress": "Address",
      "city": "City",
      "state": "State",
      "zipcode": "10000",
      "siteId": 1,
      "oldSiteID": 1,
      "siteName": "Name",
      "lat": 34.255555,
      "lng": -100.255555,
      "siteMap": null
    },
    {
      "siteDisplayName": "Site Name",
      "streetAddress": "Address",
      "city": "City",
      "state": "State",
      "zipcode": "10000",
      "siteId": 1,
      "oldSiteID": 1,
      "siteName": "Name",
      "lat": 34.255555,
      "lng": -100.255555,
      "siteMap": null
    },
    {
      "siteDisplayName": "Site Name",
      "streetAddress": "Address",
      "city": "City",
      "state": "State",
      "zipcode": "10000",
      "siteId": 1,
      "oldSiteID": 1,
      "siteName": "Name",
      "lat": 34.255555,
      "lng": -100.255555,
      "siteMap": null
    },
    {
      "siteDisplayName": "Site Name",
      "streetAddress": "Address",
      "city": "City",
      "state": "State",
      "zipcode": "10000",
      "siteId": 1,
      "oldSiteID": 1,
      "siteName": "Name",
      "lat": 34.255555,
      "lng": -100.255555,
      "siteMap": null
    },
  ];

  @ViewChild(GoogleMap, { static: false }) map: GoogleMap;

  constructor(
    private title: Title,
    private siteService: SitesService
  ) {
    this.title.setTitle("Site View Page");
  }

  ngOnInit(): void {
    console.log("ngOnInit");
  }

  ngAfterViewInit(): void {
    if (this.sites && this.sites.length>0) {
      this.setMapBounds();
    }
  }

  displaySiteDetails(site: any) {
    console.log("displaySiteDetails", site);
  }

  private setMapBounds() {
    let bounds = new google.maps.LatLngBounds();
    this.sites.forEach((site: any) => {
      bounds.extend(new google.maps.LatLng(site.lat, site.lng));
    });

    let ne = bounds.getNorthEast();
    let sw = bounds.getSouthWest();
    if (Math.abs(ne.lat() - sw.lat()) < 2) {
      bounds.extend(new google.maps.LatLng(ne.lat() + 2, ne.lng()));
      bounds.extend(new google.maps.LatLng(sw.lat() - 2, sw.lng()));

      ne = bounds.getNorthEast();
    }

    if (Math.abs(ne.lng() - sw.lng()) < 2) {
      bounds.extend(new google.maps.LatLng(ne.lat(), ne.lng() + 2));
      bounds.extend(new google.maps.LatLng(sw.lat(), sw.lng() - 2));

      sw = bounds.getSouthWest();
    }

    this.map.googleMap.fitBounds(bounds);
    this.map.googleMap.setCenter(bounds.getCenter());

    this.setMapRestrictions(ne, sw);
  }

  private setMapRestrictions(ne: google.maps.LatLng, sw: google.maps.LatLng) {
    let options: google.maps.MapOptions = this.siteService.mapOptions;
    options.restriction = {
      latLngBounds: {
        north: ne.lat() + 1,
        south: sw.lat() - 1,
        east: ne.lng() + 1,
        west: sw.lng() - 1,
      },
      strictBounds: false
    };

    this.map.googleMap.setOptions(options);
  }
}

使用的套餐：

  "dependencies": {
    "@angular-material-components/datetime-picker": "^7.0.0",
    "@angular-material-components/moment-adapter": "^7.0.0",
    "@angular/animations": "~13.1.0",
    "@angular/cdk": "~13.1.0",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/forms": "~13.1.0",
    "@angular/google-maps": "^13.2.2",
    "@angular/localize": "~13.1.0",
    "@angular/material": "~13.1.0",
    "@angular/material-moment-adapter": "~13.1.0",
    "@angular/platform-browser": "~13.1.0",
    "@angular/platform-browser-dynamic": "~13.1.0",
    "@angular/router": "~13.1.0",
    "@azure/msal-angular": "^2.5.8",
    "@azure/msal-browser": "^2.37.1",
    "@fullcalendar/angular": "^6.1.8",
    "@fullcalendar/core": "^6.1.8",
    "@fullcalendar/daygrid": "^6.1.8",
    "@fullcalendar/timegrid": "^6.1.8",
    "@microsoft/applicationinsights-web": "^2.7.2",
    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
    "@types/intro.js": "^5.1.1",
    "@types/lodash": "^4.14.178",
    "@types/moment-timezone": "^0.5.30",
    "@videogular/ngx-videogular": "^5.0.1",
    "apexcharts": "3.33.0",
    "bootstrap": "^4.6.0",
    "crypto-js": "^4.1.1",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "hls.js": "^1.3.3",
    "html2pdf.js": "^0.10.1",
    "intro.js": "^7.2.0",
    "jquery": "^3.6.0",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.29",
    "jstree": "^3.3.12",
    "lodash": "^4.17.21",
    "moment-timezone": "^0.5.34",
    "ng-apexcharts": "1.7.0",
    "ngx-cookie-service": "^13.2.1",
    "ngx-perfect-scrollbar": "^10.1.1",
    "ngx-toastr": "^14.2.2",
    "object-path": "^0.11.8",
    "perfect-scrollbar": "^1.5.5",
    "rxjs": "^7.5.2",
    "socicon": "^3.0.5",
    "tslib": "^2.3.0",
    "xlsx": "^0.18.5",
    "xlsx-js-style": "^1.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.1.4",
    "@angular/cli": "~13.1.2",
    "@angular/compiler-cli": "~13.1.0",
    "@types/core-js": "^2.5.5",
    "@types/crypto-js": "^4.1.1",
    "@types/jasmine": "~3.10.0",
    "@types/jquery": "^3.5.14",
    "@types/jstree": "^3.3.41",
    "@types/node": "^12.11.1",
    "@types/rx": "^4.1.2",
    "@videogular/ngx-videogular": "^5.0.1",
    "first-input-delay": "^0.1.3",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  }

为了解决这个问题，我添加了一个像这样的版本号

<script src="https://maps.googleapis.com/maps/api/js?v=3.53&key=API_KEY"></script>
，这工作正常，但如果我添加除 3.53 之外的任何版本或删除该版本，它就不起作用。

我还尝试创建一个具有相同配置和版本的新的临时角度应用程序，但即使我不添加任何版本号，它也能正常工作。

目前，我的 Angular 版本是 13.1.0，除 3.53 之外的任何 Google 地图版本都不适用于我的应用程序。

此外，当我没有在 Angular Application 16 中传递 Maps API URL 中的版本时，地图可以正常工作。但是，如果我没有通过 Angular Application 13 中的版本，则地图将无法按预期工作。这背后有什么原因吗？

angular google-maps google-maps-api-3 cors
1个回答
0
投票

深入研究软件包后，我发现由于 Application Insights，Google Maps API 抛出了 403 错误。因此，为了解决这个问题，我们需要添加一个排除 Google API 域的配置，这解决了这个问题。

private initializeApplicationInsights() {
   this.appInsights = new ApplicationInsights({
      config: {
        instrumentationKey: environment.appInsightsInstrumentationKey,
        enableAutoRouteTracking: true,
        enableCorsCorrelation: true,
        correlationHeaderExcludedDomains: ['*.googleapis.com'],
      }
    });

    this.appInsights.loadAppInsights();
    this.addCustomTelemetryProperties();
}

执行此操作后，无需在脚本标签中添加版本号（为我工作）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.