Angular2 - 谷歌地图-drawingManager undefined

嗨我想在谷歌地图启用绘图工具。但得到错误类似如下：Angular2 - 谷歌地图-drawingManager undefined

VM1935 [email protected]主要=浏览器：140遗漏的类型错误：无法读取未定义

import { Component } from '@angular/core'; 
import { Validators, FormGroup, FormArray, FormBuilder } from '@angular/forms'; 
import { Ng2MapComponent } from 'ng2-map'; 

Ng2MapComponent['apiUrl'] = 
    'https://maps.google.com/maps/api/js?libraries=visualization,places'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <ng2-map zoom="14" center="Brampton, Canada"> 
     <marker *ngFor="let pos of positions" 
     (click)="showInfoWindow($event)" 
     [position]="pos"></marker> 
     <info-window id="iw"> 
     lat: [[lat]], lng: [[lng]] 
     </info-window> 
     <drawing-manager 
     [drawingMode]="'marker'" 
     [drawingControl]="true" 
     [drawingControlOptions]="{ 
     position: 2, 
     drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] 
     }" 
     [circleOptions]="{ 
     fillColor: '#ffff00', 
     fillOpacity: 1, 
     strokeWeight: 5, 
     editable: true, 
     zIndex: 1 
     }"></drawing-manager> 
    </ng2-map> 
    <button (click)="showRandomMarkers()">Show Random Markers</button> 
    ` 
}) 
export class AppComponent { 
    positions = []; 

    showRandomMarkers() { 
    let randomLat: number, randomLng: number; 
    this.positions = []; 
    for (let i = 0 ; i < 9; i++) { 
     randomLat = Math.random() * 0.0099 + 43.7250; 
     randomLng = Math.random() * 0.0099 + -79.7699; 
     this.positions.push([randomLat, randomLng]); 
    } 
    } 

    showInfoWindow(marker) { 
    marker.ng2MapComponent.openInfoWindow(
     'iw', // id of InfoWindow 
     marker, // anchor for InfoWindow 
     {  // local variables for InfoWindow 
     lat: marker.getPosition().lat(), 
     lng: marker.getPosition().lng(), 
     } 
    ); 
    } 
}

模块文件的特性 '的DrawingManager'：

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { Ng2MapModule } from 'ng2-map'; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(AlertsRoutes), 
    Ng2MapModule.forRoot({apiUrl: 'https://maps.google.com/maps/api/js?key=mykey'}) 
    ] 
}) 
export class TestModule { }

另外我该如何启用绘图管理器？

来源

2017-03-01 Sanjay Kumar N S

从NG2地图的文件，似乎你需要做标准@NgModule（{进口： Ng2MapModule.forRoot（）}）的东西，并通过该apiUrl。你能否显示你的模块文件，以便我可以准备一个完整的响应？ –

只是要清楚，你没有编程使用DrawingManager的权利？你只是在你的模板中使用它，但是你仍然从ng2-map代码本身得到这个错误。我的理解是否正确？ –

由ng2-map给出的示例[1]将'&libraries=visualization,places,drawing'附加到模块导入。我找不到有关可用库的具体文档，但您可能首先尝试所有3，然后查看是否可以删除其中的一部分。

它会改变你的NgModule代码：

@NgModule({ 
    imports: [ 
    RouterModule.forChild(AlertsRoutes), 
    Ng2MapModule.forRoot({apiUrl: 'https://maps.google.com/maps/api/js?key=mykey&libraries=visualization,places,drawing'}) 
    ] 
})

[1] https://github.com/ng2-ui/ng2-map/blob/0e0bd891623fe4adc6a7ea78e76cf1e36456eb8b/app/main.ts

来源

2017-03-01 11:05:08

您应该也可以移除Ng2MapComponent ['apiUrl'] = 'https://maps.google.com/maps/api/js?libraries=visualization,places'; –

Angular2 - 谷歌地图-drawingManager undefined

回答

相关问题