создать простую карту Google с помощью типа script и angular2

Question

создать простую карту Google с помощью типа script и angular2

0

Я дебютант в машинописном программировании, и я пытаюсь отобразить простую карту 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>

когда я запускаю приложение, я не могу перейти к шаблону, где есть карта. Я эти сообщения об ошибках в консоли.

сообщения об ошибках в консоли

Не могли ли вы помочь мне, пожалуйста?

Yseult Fran 04 авг. 2016, в 17:17

Источник

Теги:

angular

typescript

google-maps

angular2-routing

1 ответ

Ещё вопросы

yurzui · Accepted Answer · 2016-08-04T13-42-00.000Z

Используйте 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, пожалуйста, не используйте фрагмент, чтобы показать свой код.

Спасибо за помощь. Я пытался, и это работает. Извините за фрагмент, я не знал.
Привет, получаю ошибку mapDiv не существует по типу GlobalEventHandlers