时间戳

首页 > 解决方案 > Angular 中的谷歌地图

angular - Angular 中的谷歌地图

问题描述

所以我正在关注这篇文章，以便在我的 Angular SPA 中包含谷歌地图。

我的 HTML 是 app.component.html

<html>
  <head>
    <meta charset="utf-8" />
    <title>Map</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=xxxx"></script>

  </head>
  <body>
    <h2>Text</h2>
    <textarea rows="5"  [ngModel]="data" (ngModelChange)="change($event)"></textarea>
    <google-map
      height="500px"
      width="100%"
      [zoom]="zoom"
      [center]="center"
      [options]="options"
    ></google-map>
    <!-- Use custom zoom buttons -->
    <button (click)="zoomIn()">Zoom in</button>
    <button (click)="zoomOut()">Zoom out</button>
  </body>
</html>

app.component.ts 是

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'demoapp';
  data: string = '';
  zoom = 12
  center: google.maps.LatLngLiteral
  options: google.maps.MapOptions = {
    mapTypeId: 'hybrid',
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 15,
    minZoom: 8,
  }

  constructor(){
    
  }
  ngOnInit(): void {
    navigator.geolocation.getCurrentPosition((position) => {
      this.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      }
    })
  }
  zoomIn() {
    if (this.zoom < this.options.maxZoom) this.zoom++
  }

  zoomOut() {
    if (this.zoom > this.options.minZoom) this.zoom--
  }
  change(event){
    console.table(event);
  }
}

app.module.ts 是

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { GoogleMapsModule } from '@angular/google-maps'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    GoogleMapsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

当我运行 ng serve 时，地图不会呈现，并且我在控制台中看到以下错误。

core.js:4352 ERROR Error: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    at new GoogleMap (google-maps.js:203)
    at NodeInjectorFactory.GoogleMap_Factory [as factory] (google-maps.js:421)
    at getNodeInjectable (core.js:4184)
    at instantiateAllDirectives (core.js:8102)
    at createDirectivesInstances (core.js:7476)
    at ɵɵelementStart (core.js:14800)
    at Module.ɵɵelement (core.js:14851)
    at AppComponent_Template (app.component.html:14)
    at executeTemplate (core.js:7449)
    at renderView (core.js:7258)
defaultErrorLogger @ core.js:4352
handleError @ core.js:4400
(anonymous) @ core.js:28146
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27413
(anonymous) @ core.js:28146
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27486
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:27474
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:28074
zUnb @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.js:11
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
main.ts:12 Error: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    at new GoogleMap (google-maps.js:203)
    at NodeInjectorFactory.GoogleMap_Factory [as factory] (google-maps.js:421)
    at getNodeInjectable (core.js:4184)
    at instantiateAllDirectives (core.js:8102)
    at createDirectivesInstances (core.js:7476)
    at ɵɵelementStart (core.js:14800)
    at Module.ɵɵelement (core.js:14851)
    at AppComponent_Template (app.component.html:14)
    at executeTemplate (core.js:7449)
    at renderView (core.js:7258)

标签： angulargoogle-maps

解决方案

有点迟到了，但我在使用 Angular CLI RC.0 时遇到了类似的问题。

原来我没有安装和导入typings，可以这样做：

npm install --save-dev @types/googlemaps

从“@types/googlemaps”导入{}；

推荐阅读