【问题标题】:Can't resolve parameters when using MapsAPILoader - Angular使用 MapsAPILoader 时无法解析参数 - Angular
【发布时间】:2023-03-24 17:14:01
【问题描述】:

我正在尝试按照下面列出的教程使用 Angular 8 实现自动完成功能。我已经在不同版本的 Angular 中多次实现了这个地理定位器自动完成功能,但是今天在 Angular 8 上我得到了错误:

使用 MapsAPILoader 时无法解析参数

教程

https://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/

我的代码:

import { ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { } from 'googlemaps';
import { MapsAPILoader } from '@agm/core';

export class App implements OnInit {
  ...
  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) {}

  ngOnInit() {}

如果我删除这一行:

private mapsAPILoader: MapsAPILoader

错误消失

【问题讨论】:

  • 这个类没有@Component装饰器只是一个错误吗? DI 不适用于纯 TS 类。

标签: angular google-maps google-maps-api-3 agm-map


【解决方案1】:

刚刚看了教程。如果您只是从 App 类中复制代码,那么它将无法正常工作。你需要添加组件装饰器:

@Component({
  selector: 'my-app',
  styles: [`
    agm-map {
      height: 300px;
    }
  `],
  template: `
    <div class="container">
      <h1>Angular 2 + Google Maps Places Autocomplete</h1>
      <div class="form-group">
        <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
      </div>
      <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
        <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
      </agm-map>
    </div>
  `
})
export class App implements OnInit {}

【讨论】:

  • 天啊!!只是一个菜鸟的错误,哈哈,我快疯了!哈哈,特别是因为我之前实现了这个,哈哈谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-05-15
  • 2019-01-24
  • 2019-07-16
  • 2017-10-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多