Google maps 入门-如何在angular cli中使用Google maps api

我最近开始学习ng2。所以我使用angular cli创建了一个项目，然后我意识到我需要一些第三方模块。比如谷歌地图api、lodash、jquery等等。我知道Typescript的基本知识，但如何在Angular2应用程序中使用这些模块？另外，为了学习，我只想使用库，例如谷歌地图api，而不是其他人在谷歌地图api上制作的任何现有ng2模块/组件

以前，我只使用JS，我会包含JS文件并参考api文档，以了解要参考和构建我的应用程序的方法。现在，对于Angular2，我应该采取什么步骤来做同样的事情

根据我的研究，看起来我是第一次安装所需的类型脚本文件。 所以对于谷歌地图，我安装了npm——保存@types/googlemaps。 现在，我是否需要通过将此模块包含在app.module.ts中，将其导入我的angular应用程序？在导入数组中？还是现在可以在全球范围内使用

一位消息来源提到使用npm和my angular-cli.json安装它，包括在脚本数组中对该库的引用。像这样：

"scripts": ['./node_modules/googlemaps/googemaps.min.js'],

安装google maps api时使用哪种方法？我认为Typescript可能是一种方式，因为Angular应用程序的其余部分将使用Typescript编写

现在在我的app.component.ts中，我想使用我安装的typescript创建一个简单的映射。我该怎么做？GoogleMapsAPI说要像这样创建一个新的地图实例

var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          scrollwheel: false,
          zoom: 8
        });

用我刚安装的谷歌地图的typescript版本，我将如何做到这一点

Googlemaps的typescript版本会拥有与原始API相同的方法吗？流行的JS库的typescripts是否有我可以参考的文档站点？

由@Steve G指出的项目。提供了一个良好的起点，但出于某些原因（如管理您自己的请求策略），您可能希望制作您自己的类型包装器。 下面是我如何使用Angular Cli实现的：

第一步：

npm i --save @types/googlemaps

其次，将类型添加到您的

tsconfig.app.json

：

"types": ["googlemaps"]

最后写下你的打字脚本：

//nothing to import here

//Replace this by anything without an ID_KEY
const getScriptSrc = (callbackName) => {
  return `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=${callbackName}`;
}

export class GMapService {

  private map: google.maps.Map;
  private geocoder: google.maps.Geocoder;
  private scriptLoadingPromise: Promise<void>;

  constructor() {
        //Loading script
        this.loadScriptLoadingPromise();
        //Loading other components
        this.onReady().then(() => {
          this.geocoder = new google.maps.Geocoder();
        });
  }

  onReady(): Promise<void> {
    return this.scriptLoadingPromise;
  }

  initMap(mapHtmlElement: HTMLElement, options: google.maps.MapOptions): Promise<google.maps.Map> {
    return this.onReady().then(() => {
      return this.map = new google.maps.Map(mapHtmlElement, options);
    });
  }

  private loadScriptLoadingPromise() {
    const script = window.document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.defer = true;
    const callbackName: string = 'UNIQUE_NAME_HERE';
    script.src = getScriptSrc(callbackName);
    this.scriptLoadingPromise = new Promise<void>((resolve: Function, reject: Function) => {
      (<any>window)[callbackName] = () => { resolve(); };

      script.onerror = (error: Event) => { reject(error); };
    });
    window.document.body.appendChild(script);
  }

  /** Exemple of wrapped to promise API */
  geocode(address: string | google.maps.GeocoderRequest): Promise<google.maps.GeocoderResult[]> {
    return this.onReady().then(() => {
      this.geocoder.geocode(typeof address == "google.maps.GeocoderRequest" ? address: {address: address},
          (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => {
            if(status == google.maps.GeocoderStatus.OK) {
              return results;
            } else {
              throw new Error(status.toString());
            }
      });
    });
  });

}

//此处没有要导入的内容
//将其替换为没有ID_键的任何内容
const getScriptSrc=（callbackName）=>{
返回`https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=${callbackName}`；
}
导出类GMapService{
私有地图：google.maps.map；
私人地理编码器：google.maps.geocoder；
私有脚本加载承诺：承诺；
构造函数（）{
//加载脚本
this.loadScriptLoadingPromise（）；
//加载其他组件
这个.onReady（）。然后（（）=>{
this.geocoder=新的google.maps.geocoder（）；
});
}
onReady（）：承诺{
返回此.scriptLoadingPromise；
}
initMap（mapHtmlElement:HTMLElement，选项：google.maps.MapOptions）：承诺{
返回此.onReady（）。然后（（）=>{
返回this.map=new google.maps.map（mapHtmlElement，选项）；
});
}
私有加载脚本加载承诺（）{
const script=window.document.createElement（'script'）；
script.type='text/javascript'；
script.async=true；
script.defer=true；
const callbackName:string='UNIQUE_NAME_HERE'；
script.src=getScriptSrc（callbackName）；
this.scriptLoadingPromise=新承诺（（解析：函数，拒绝：函数）=>{
（窗口）[callbackName]=（）=>{resolve（）；}；
script.onerror=（错误：事件）=>{reject（error）；}；
});
window.document.body.appendChild（脚本）；
}
/**包装承诺API示例*/
地理编码（地址：string | google.maps.GeocoderRequest）：承诺{
返回此.onReady（）。然后（（）=>{
this.geocoder.geocode（typeof address==“google.maps.GeocoderRequest”？地址：{address:address}，
（结果：google.maps.GeocoderResult[]，状态：google.maps.GeocoderStatus）=>{
if（status==google.maps.GeocoderStatus.OK）{
返回结果；
}否则{
抛出新错误（status.toString（））；
}
});
});
});
}

因此，地图组件将如下所示：

@Component({
  selector: 'app-gmap-wrapper',
  template: '<div #map style="width:400px; height:300px">loading...</div>'
})
export class GMapWrapperComponent implements OnInit {
    @ViewChild('map') mapRef: ElementRef;

    constructor(private gmapService: GMapService) { }

    ngOnInit() {
      this.gmapService.initMap(this.mapRef.nativeElement, {
        center: {lat: 1234.1234, lng: 1234.1234},
        scrollwheel: true,
        zoom: 8
      });
    }
}

@组件({
选择器：“应用程序gmap包装器”，
模板：“正在加载…”
})
导出类GMapWrapperComponent实现OnInit{
@ViewChild（'map'）mapRef:ElementRef；
构造函数（私有gmapService:gmapService）{}
恩戈尼尼特（）{
this.gmapService.initMap（this.mapRef.nativeElement{
中心：{lat:1234.1234，lng:1234.1234}，
滚轮：对，
缩放：8
});
}
}

---

如果没有所有类型前缀中的名称空间

google.maps

，该代码应该会更好。也许有什么建议？

我在组件方面也遇到过AGM问题，然后我尝试了nu maps，在那里我也遇到了问题

所以我使用了普通的google api javascript，我认为它更好：

• 简单的
• 有据可查
• 不依赖于一些不合并拉取请求的人
• 它起作用了

  ---

男人。。。祝你好运！angular2谷歌地图是作为一个包装来帮助你避免即将经历的痛苦的并不是说它不能完成，但agm使它更易于管理。不要认为仅仅将现有的API集成到我的Angular2项目中应该不难。更重要的是，通过Typescript集成和使用第三方模块（如GoogleMaps、Jquery或Lodash）所涉及的步骤。我并没有试图重新发明或创造我自己的包装，至少现在还没有。并不是说这本身就很难，但放牧所有的兔子是一件乏味的事情。不要让我的评论劝阻你。。。这是一次很棒的学习经历！我也使用了一些不太健壮的API/库。您可以从任何组件调用

onReady

、

initMap

和

geocode

。我用你的评论编辑了代码。ThanksTook再次查看您的代码并发现了一些问题：（1）在geocode函数中，返回onReady（）函数，wh