如何使用角度2的谷歌地图自动完成

时间:2017-08-19 11:29:24

标签: javascript angular systemjs

您好我使用带有角度2的谷歌地图自动完成功能,但它给了我一个错误:

  

http://localhost:3000/node_modules/ng2-google-place-autocomplete/ 404(未找到)

有没有解决方案可以解决这个问题。

1 个答案:

答案 0 :(得分:0)

你可以使用'angular2-google-map-auto-complete'插件

1)安装angular2-google-map-auto-complete插件以进行自动完成。

在js文件中,

                //Please include below lines in systemjs.config.js

                var map ={ 'angular2-google-map-auto-complete' : 'node_modules/angular2-google-map-auto-complete'};
                var packages = {'angular2-google-map-auto-complete'' : {defaultExtension:'js';

在组件中,

                //Include the below lines into your component file

            import { Component} from '@angular/core';
            import {GoogleplaceDirective} from 'angular2-google-map-auto-complete/directives/googleplace.directive';
            @Component({
                selector: 'sd-letter',
                 template:  `
                <input type="text" [(ngModel)] = "address"  (setAddress) = "getAddress($event)" googleplace/>
                          `,
                directives:[GoogleplaceDirective]
            })
            export class Angular2GoogleComponent implements {
                     public address : Object;
                    getAddress(place:Object) {       
                       this.address = place['formatted_address'];
                       var location = place['geometry']['location'];
                       var lat =  location.lat();
                       var lng = location.lng();
                       console.log("Address Object", place);
                   }
            }

你可以在这里找到更多细节, demo

我希望它会对你有所帮助。