Я дебютант в машинописном программировании, и я пытаюсь отобразить простую карту google с помощью машинописных и угловых2 на шаблоне моего приложения. У меня есть простое приложение, использующее angular2 с укоренением с шаблонами différents.
в моем 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\ 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>
когда я запускаю приложение, я не могу перейти к шаблону, где есть карта. Я эти сообщения об ошибках в консоли.
сообщения об ошибках в консоли
Не могли ли вы помочь мне, пожалуйста?
Используйте ElementRef
вместо Element
:
import { ElementRef } from '@angular/core';
...
constructor (elRef: ElementRef) {
...
this.map = new google.maps.Map(elRef.nativeElement, this.options);
}
Или используйте ViewChild для получения ссылки на div:
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);
}
}
PS, пожалуйста, не используйте фрагмент, чтобы показать свой код.