將按鈕添加到Google地圖中Angular2

我是Angular中的新成員，並且有一個顯示全屏Google地圖的Web應用程序。我想添加一個「註銷」按鈕到谷歌地圖佈局（不是標題）。將按鈕添加到Google地圖中Angular2

我知道使用JavaScript谷歌地圖API，可以像：

var Logout = document.getElementById('Logout'); 
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(Logout);

但隨着AGM - Angular Google Maps，我怎麼沒發現。

現在我有：

map.component.html

<button id="Logout" [(ngModel)]="logoutButton" class="toggle-button controls button" (click)="logout()">Logout</button> 

<agm-map [latitude]="lat" [longitude]="lng" [zoom]=12 [mapTypeControl]="true" (boundsChange)="centerChanged($event)" (idle)="loadParkings()" > 

    <agm-marker *ngFor="let park of parkings" [latitude]="park.location[0]" [longitude]="park.location[1]"></agm-marker> 
</agm-map>

map.component.ts

import {GoogleMapsAPIWrapper} from '@agm/core'; 

declare var google: any; 

@Component({ 
    selector: 'app-map', 
    templateUrl: './map.component.html', 
    styleUrls: ['./map.component.css'] 
}) 

export class MapComponent implements OnInit { 
    lat: number; 
    lng: number; 
    map: any; 
    logoutButton: any; 

    constructor(
    public mapApi: GoogleMapsAPIWrapper) {} 

    ngOnInit(): void { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(position => { 
     this.lat = position.coords.latitude; 
     this.lng = position.coords.longitude; 
     }); 
    } else { 
     this.lat = 47.2275654; 
     this.lng = -1.3849729; 
    } 
    } 


    logout() { 
    this.authenficationService.logout(); 
    this.router.navigate(['/login']); 
    } 
}

來源

2017-10-17 Maxime Lamarthe

我發現我的解決方案，前幾天，它看起來像你的答案。我用事件（mapReady）給出了本地地圖的一個實例。

還有我如何設法在地圖中顯示搜索框。

map.component.html

<agm-map [latitude]="lat" [longitude]="lng" [zoom]=12 [mapTypeControl]="true" (boundsChange)="centerChanged($event)" (idle)="loadParkings()" 
    (mapReady)="mapReady($event)" (boundsChange)="boundsChanged($event)"> 
    <button id="Settings" class="toggle-button controls button" [hidden]="hideSettings"> 
     <mat-icon aria-hidden="true">settings</mat-icon> 
    </button> 
    <button id="Profile" class="toogle-button controls button" (click)="profileClicked()"> 
     <mat-icon aria-hidden="true">account_circle</mat-icon> 
    </button> 
    <button id="Logout" class="toggle-button controls button" (click)="logout()">Logout</button> 
    <input id="Map-Search" class="controls" type="text" placeholder="Search Box"> 
    <agm-marker *ngFor="let park of parkings" [latitude]="park.location[0]" [longitude]="park.location[1]"></agm-marker> 
</agm-map>

map.component.ts

declare const google: any; 

@Component({ 
    selector: 'app-map', 
    templateUrl: './map.component.html', 
    styleUrls: ['./map.component.css'], 
}) 

export class MapComponent { 
    map: any; 
    searchBox: any; 

    [...] 

    mapReady(event: any) { 
     this.map = event; 
     const input = document.getElementById('Map-Search'); 
     this.searchBox = new google.maps.places.SearchBox(input); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('Settings')); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('Profile')); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
     this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('Logout')); 

     this.searchBox.addListener('places_changed',() => this.goToSearchedPlace()); 
    } 

    goToSearchedPlace() { 
     const places = this.searchBox.getPlaces(); 
     if (places.length === 0) { 
     return; 
     } 
     const bounds = new google.maps.LatLngBounds(); 
     places.forEach((place) => { 
     if (place.geometry.viewport) { 
      bounds.union(place.geometry.viewport); 
     } else { 
      bounds.extend(place.geometry.location); 
     } 
     }); 
     this.map.fitBounds(bounds); 
    } 
}

來源

2017-11-03 10:50:29

我前幾天有同樣的問題。我不確定這是否是正確的方法。您可以通過GoogleMapsAPIWrapper中的getNativeMap（）獲取地圖。然後將其分配給任何類型的變量，否則，它不能找到的控制：

視圖更button.component.ts

import { Component, OnInit } from '@angular/core'; 
import { GoogleMapsAPIWrapper } from '@agm/core/services/google-maps-api-wrapper'; 
declare var google: any; 

@Component({ 
    selector: 'app-view-more-button', 
    templateUrl: './view-more-button.component.html', 
    styleUrls: ['./view-more-button.component.css'] 
}) 
export class ViewMoreButtonComponent implements OnInit { 

    private _isMoreMap: boolean; 

    constructor(private _wrapper: GoogleMapsAPIWrapper) { 
    this._isMoreMap = true; 
    } 

    ngOnInit() { 
    this._wrapper.getNativeMap().then((m) => { 
     // m type doesnt have controls declared. So need to store it to <any> first then use controls 
     var nativeMap: any; 
     nativeMap = m; 
     nativeMap.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById("view-more-button")); 
    }); 
    } 

    private _click() { 
    ... 
    } 

}

視圖更button.component.html

<button class="btn btn-primary" (click)="_click()" id="view-more-button"> 
    View More Map 
</button>

來源

2017-11-02 18:31:16 Frank

將按鈕添加到Google地圖中Angular2

回答

相關問題