Question

您好我是angular 2的新手，因为整个语法不同需要您的帮助来解决以下错误。我正在尝试实施自动填充Google地址栏。因此使用@ agm / core包。

现在，在运行项目时，我面临如下错误：

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Prerendering failed because of error: F:\Hcue\Zaumm\zaaum\zaaum\zaaum\node_modules\@agm\core\index.js:2
    export * from './directives';
    ^^^^^^
    SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.module.exports (F:\Hcue\Zaumm\zaaum\zaaum\zaaum\ClientApp\dist\main-server.js:1321:19)
    at __webpack_require__ (F:\Hcue\Zaumm\zaaum\zaaum\zaaum\ClientApp\dist\main-server.js:20:30)
    Current directory is: F:\Hcue\Zaumm\zaaum\zaaum\zaaum

在我的package.json中使用“@ agm / core”：“1.0.0-beta.0”

请告诉我我做错了什么。对此感到震惊，无法继续前进。提前致谢。

我已解决了地图问题并在我的网络项目中获得了自动填充功能。请在package.json文件中包含"angular2-google-maps": "^0.16.0"或运行npm install angular2-google-maps@0.16.0。

在app.module.ts文件中添加import { AgmCoreModule, MapsAPILoader} from 'angular2-google-maps/core';。

下面是要实现自动编译的相应TS。

import { Component, NgModule, OnInit, NgZone  } from '@angular/core';
import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core';


declare var google: any;

@Component({
    selector: 'settings',
    template: require('./account.component.html'),
    providers: [UserService]
})


export class AccountComponent implements OnInit {



markers: marker[] = [];

constructor(
        private _loader: MapsAPILoader,
        private _zone: NgZone) {
    }

    ngOnInit() {
            this.autocomplete();      
    }

    autocomplete() {
        this._loader.load().then(() => {
            var autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocompleteInput"), {});
            google.maps.event.addListener(autocomplete, 'place_changed', () => {
                this._zone.run(() => {
                    debugger;
                    var place = autocomplete.getPlace();
                    this.addressField = place.formatted_address;
                    this.markers = [];
                    this.markers.push({
                        lat: place.geometry.location.lat(),
                        lng: place.geometry.location.lng(),
                        label: place.name,
                        draggable: false,
                        animation: ''
                    });
                    this.lat = place.geometry.location.lat();
                    this.lng = place.geometry.location.lng();
                    console.log(place);
                });
            });
        });
    }

    // google maps zoom level
    zoom: number = 11;

    // initial center position for the map
    lat: number = 13.0405026;
    lng: number = 80.2336924;

    clickedMarker(label: string, index: number) {
        debugger;
        console.log(`clicked the marker: ${label || index}`)
    }

    mapClicked($event: any) {
        debugger;
        this.markers.push({
            'lat': $event.coords.lat,
            'lng': $event.coords.lng,
            'label': '',
            'draggable': false,
            'animation': google.maps.Animation.DROP
        });
        debugger;
    }

    markerDragEnd(m: marker, $event: MouseEvent) {
        debugger;
        console.log('dragEnd', m, $event);
    }


}


interface marker {
    lat: number;
    lng: number;
    label?: string;
    draggable: boolean;
    animation: any;
}

为自动完成添加以下HTML输入元素，如下所示。

<input type="text" [(ngModel)]="model.address" id="autocompleteInput" class="validate">

添加以下HTML地图元素以显示地图。

<sebm-google-map [latitude]="lat"
                             [longitude]="lng"
                             [zoom]="zoom"
                             [disableDefaultUI]="false"
                             [zoomControl]="true" style="height: 300px; width: 600px;">

                <sebm-google-map-marker *ngFor="let m of markers; let i = index"
                                        (markerClick)="clickedMarker(m.label, i)"
                                        [latitude]="m.lat"
                                        [longitude]="m.lng"
                                        [label]="m.label"
                                        [markerDraggable]="m.draggable"
                                        (dragEnd)="markerDragEnd(m, $event)">
                </sebm-google-map-marker>

            </sebm-google-map>

如果需要，请导入相同的

在这个版本中，只有你可以毫无错误地实现它。

angular 2：@agm \ core \ index.js：2 - 意外的令牌导出

0 个答案: