Question

我玩过angular2 maps，但最后我想我想直接使用google maps api。

将此加载到角度2中的最佳/正确方法是什么？目前我正在通过脚本标签加载它，插入到index.html文件中，就像这样。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ourlatitude</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
</head>
<body>
    <script 
    src="https://maps.googleapis.com/maps/api/js?key=my_api_key">
    </script>
  <app-root>Loading...</app-root>
</body>
</html>

然后我在将保存地图的组件的ngAfterViewInit（）钩子内的组件中创建一个地图。

ngAfterViewInit() {
    this.map = new google.maps.Map(this.mymap.nativeElement, {zoom: 4, center: {lat: -25.363, lng: 131.044} });
}

这似乎有效，但添加脚本标记似乎不是正确的做法。我尝试将脚本添加到angular-cli.json脚本：[]数组，但这似乎不起作用（调用new google.maps.Map()失败，谷歌未定义）。

顺便说一句，我通过npm install --save @types/google-maps安装了这些类型，它们似乎得到了认可。

Answer 1

这是我整合google-maps的方式：

我创建了脚本加载服务，它只在加载脚本时才加载必要 -

从'@ angular / core'导入{Injectable};

@Injectable（）导出类ScriptLoadService {

constructor（）{}

public loadScript（url，id，c）：void { if（！document.getElementById（id））{ const script = document.createElement（'script'）; script.type ='text / javascript'; script.src = url; script.id = id; if（c）{ script.addEventListener（'load'，function（e）{ c（null，e）; }，false）; } document.head.appendChild（脚本）; } }

}
在您的环境文件中添加googleMapURL

googleMapURL：'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX&libraries=places'

现在您可以通过注入在任何组件中使用google maps api ScriptLoadService和ngOnInit或ngAfterViewInit调用loadScript 功能：

@ViewChild（'mapElement'）mapElm：ElementRef; //显示地图

constructor( private load: ScriptLoadService ) {} // inject the service

  ngAfterViewInit() {
    this.googleMapScript.loadScript(environment.googleMapURL, 'google-map', () => {
      this.center = new google.maps.LatLng(
        this.lat,
        this.lng);

      // Create map
      this.map = new google.maps.Map(this.mapElm.nativeElement, {
        zoom: 18,
        center: this.center,
        disableDefaultUI: true,
        scrollwheel: false,
      });

      // Add Marker to current location detected by browser
      this.marker = new google.maps.Marker({
        position: this.center,
        map: this.map
      });
});
}

希望这会有所帮助：）

Answer 2

尝试使用Getting started，这个文档让您从头开始构建一个带有angular2-google-maps的Angular 2应用程序。加载谷歌地图api是更清洁，更有效的方式，因为它是使用angular2集成的。

要熟悉angular2和angular2-google-maps并且不想使用NPM设置完整项目，可以使用以下Plunker。它具有与Angular2，Typescript以及angular2-google-maps一起使用的所有依赖关系：Plunkr link。

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://unpkg.com/zone.js@0.6.21/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="https://unpkg.com/typescript@1.8.10/lib/typescript.js"></script>
    <script src="systemjs.config.js"></script>

    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>

  </body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

将Google地图API加载到angular2中的最佳方法是什么？

2 个答案: