将googlemaps添加到angular-cli

问题描述：

我正在尝试将googlemaps实施到我的angular-cli项目。我知道有一个'angular2-google-maps'组件（github），但我需要路由和更多自定义功能。将googlemaps添加到angular-cli

我发现执行地图到一个项目有两种方式：

1：stackoverflow：与谷歌API载入 - 但我无法弄清楚如何初始化谷歌，地图...

2：使用DefinitelyTyped google.maps.d.ts。我将它与--global（因为环境ist弃用..）安装到我的项目，并将index.d.ts（全球）添加到src/typings.d.ts，并可以使用“google.map ..”在.TS文件：

myLatLng = {lat: -25.363, lng: 131.044}; 
    map:any; 

    constructor() { 
    this.map = new google.maps.Map(document.getElementById('map'), { 
     center: this.myLatLng, 
     zoom: 4 
    }); 
    }

但如果我有角CLI它的错误构建它： “的ReferenceError：谷歌没有定义”

什么想法？

答

在这里，一步一步的指南，添加一个谷歌地图组件到angular-cli项目。

第一步：从DefinitelyTyped安装google.maps：

typings i dt~google.maps --global --save

第二步：如果你已经安装了旧的分型添加

/// <reference path="../typings/index.d.ts" />

到你的src/typings.d.ts

第3步：生成新组件

ng g component google-maps

下面的代码添加到：

.TS：

height = '100px'; 
    myLatLng = {lat: -25.363, lng: 131.044}; 
    map:any; 

    constructor(private googleApi:GoogleApiService) {} 

    ngOnInit() { 
    this.googleApi.initMap().then(() => { 

     let latlng = new google.maps.LatLng(this.myLatLng.lat, this.myLatLng.lng); 

     this.map = new google.maps.Map(document.getElementById('map'), { 
     center: latlng, 
     zoom: 4 
     }); 

     new google.maps.Marker({ 
     position: latlng, 
     map: this.map, 
     title: 'Hello World!' 
     }); 
    }); 
    }

的.html：

<div id="map" [style.height]="height"></div>

第四步：生成新的服务

ng g service google-maps/shared/google-api

添加GoogleApiService + HTTP_PROVIDERS为src /main.ts

代码：

const API_KEY = '[insert your code]'; 
const url = 'https://maps.googleapis.com/maps/api/js?key='+ API_KEY +'&callback=initMap'; 

@Injectable() 
export class GoogleApiService { 
    private loadMap: Promise<any>; 

    constructor(private http:Http) { 
    this.loadMap = new Promise((resolve) => { 
     window['initMap'] =() => { 
     resolve(); 
     }; 
     this.loadScript() 
    }); 
    } 

    public initMap():Promise<any> { 
    return this.loadMap; 
    } 

    private loadScript() { 
    let script = document.createElement('script'); 
    script.src = url; 
    script.type = 'text/javascript'; 

    if (document.body.contains(script)) { 
     return; 
    } 
    document.getElementsByTagName('head')[0].appendChild(script); 
    } 
}

也许你需要删除从spec.ts文件的一些线路。但是，您可以将GoogleMapsComponent添加为指令。

它是超级容易与路线等扩大也许，如果我有时间我上传我GoogleMapsComponent的当前版本的github ..

将googlemaps添加到angular-cli

相关推荐