instanciate一個簡單的谷歌地圖類型腳本和angular2

我是打字稿編程的初次亮相，我嘗試顯示一個簡單的谷歌地圖使用typescript和angular2在我的應用程序的模板。我有一個簡單的應用程序，使用angular2與生成différents模板。instanciate一個簡單的谷歌地圖類型腳本和angular2

在我mapping.ts我有：

//mapping.ts 
 

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

 
/// <reference path="../typings/googlemaps/google.maps.d.ts" /> 
 
/// <reference path="../typings/markerclustererplus/markerclustererplus.d.ts" /> 
 

 

 

 
@Component({ 
 
    selector: 'ns-map', 
 
    template: ` 
 
    <div id="map"></div> 
 
    <button (click)="sayHello()">Say Hello</button> 
 

 
    
 
    ` 
 
    
 

 
}) 
 
    
 

 

 
export class Mapping { 
 

 
     public name: string; 
 
     private map: any; 
 
     private options: any; 
 

 
     constructor (mapDiv: Element) { 
 
      this.name = "GoogleMap"; 
 
      this.options = { 
 
       center: new google.maps.LatLng(53.83305, -1.66412), 
 
       zoom: 3, 
 
       MapTypeId: google.maps.MapTypeId.TERRAIN 
 
      }; 
 
      this.map = new google.maps.Map(mapDiv, this.options); 
 
     } 
 
    }

我app.component.ts

import { Component, OnInit } from '@angular/core'; 
 
import {CORE_DIRECTIVES} from '@angular/common'; 
 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
 
import {Observable} from 'rxjs/Observable'; 
 
import { UserService }  from './services/user.service'; 
 
import { UsersComponent } from './controllers/users.component'; 
 
import { User } from './controllers/user'; 
 
import {Mapping} from './mapping'; 
 

 
@Component({ 
 
    selector: 'my-app', 
 
    template: ` 
 
    <ul id="tool"> 
 
     <li style="float:left"><a [routerLink]="['/']"> <img src="logo.png" height="30px" alt=""></a></li> 
 
     <li class="toolbar"><a [routerLink]="['/users']">Users </a></li> 
 
     <li class="toolbar"><a [routerLink]="['/map']">Map</a></li> 
 
     <li class="toolbar"><a [routerLink]="['/form']">Formulaire</a></li> 
 
     <li class="toolbar"><a [routerLink]="['/mapp']">Google</a></li> <br> 
 
<br> 
 
     
 
    </ul> 
 
    <br> <br> 
 
    <h1>{{title}}</h1> 
 
    <ns-map></ns-map> 
 
    <router-outlet></router-outlet> 
 

 
    `, 
 
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES], 
 
    providers: [ 
 
    UserService 
 
    ] 
 
}) 
 

 

 
export class AppComponent { 
 
    title = 'Capturs\'s users'; 
 
    users: User[]; 
 
    selecteduser: User; 
 

 

 
constructor(private userService: UserService) { } 
 
    getUsers() { 
 
    this.userService.getUsers().then(users => this.users = users); 
 
    } 
 
    ngOnInit() { 
 
    this.getUsers(); 
 
    } 
 
    onSelect(user: User) { this.selecteduser = user; } 
 
}

在我的主模板

我有理牛逼這個

<html> 
 
    <head> 
 
    <title>Capturs</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="style.css"> 
 

 
    <link rel="icon" type="image/png" href="icone.png" id="icone" /> 
 

 
    <script async defer 
 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCCGhv7ryot0iu9ufz-BXlZBZxcYhB7q8c"> 
 
    </script> 
 
    <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script> 
 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
 
    <!-- 1. Load libraries --> 
 
    <!-- Polyfill(s) for older browsers --> 
 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
 

 

 

 
    <!-- 2. Configure SystemJS --> 
 
    <script src="systemjs.config.js"></script> 
 
    <script> 
 
     System.import('app').catch(function(err){ console.error(err); }); 
 
    </script> 
 
    <base href="/" > 
 

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

 

 

 

 
    
 
    </body> 
 
</html>

當我運行應用程序，我不能去那裏的地圖模板。我在控制檯中輸入這些錯誤信息。

errors messages in console

請，你能幫幫我嗎？

來源

2016-08-04 Yseult Fran

使用ElementRef代替Element：

import { ElementRef } from '@angular/core'; 
... 
constructor (elRef: ElementRef) { 
    ... 
    this.map = new google.maps.Map(elRef.nativeElement, this.options); 
}

或者使用ViewChild獲得參考格：

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

@Component({ 
    selector: 'ns-map', 
    template: ` 
    <div id="map" #mapDiv></div> 
    <button (click)="sayHello()">Say Hello</button> ` 
}) 
export class Mapping { 
    @ViewChild('mapDiv') mapDiv: ElementRef; 

    name = "GoogleMap"; 
    options = { 
     center: new google.maps.LatLng(53.83305, -1.66412), 
     zoom: 3, 
     MapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    map: any; 

    ngAfterViewInit() { 
     this.map = new google.maps.Map(this.mapDiv.nativeElement, this.options); 
    } 
}

附：請不要使用snippet來顯示您的代碼

來源

2016-08-04 14:57:32 yurzui

感謝您的幫助。我嘗試過，它的工作原理。對不起，我不知道。 –

instanciate一個簡單的谷歌地圖類型腳本和angular2

回答

相關問題