将按钮添加到 google 地图 Angular2
add button into google maps Angular2
我是 Angular 的新手,有一个显示全屏 google 地图的网络应用程序。
我想在 google 地图布局中添加一个 "logout" 按钮(而不是 header)。
我知道 javascript Google 地图 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']);
}
}
几天前我遇到了同样的问题。我不确定这是否是正确的方法。您可以通过 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>
几天前我找到了我的解决方案,它看起来像你的答案。
我使用了提供原生地图实例的事件 (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);
}
}
我是 Angular 的新手,有一个显示全屏 google 地图的网络应用程序。 我想在 google 地图布局中添加一个 "logout" 按钮(而不是 header)。
我知道 javascript Google 地图 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']);
}
}
几天前我遇到了同样的问题。我不确定这是否是正确的方法。您可以通过 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>
几天前我找到了我的解决方案,它看起来像你的答案。 我使用了提供原生地图实例的事件 (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);
}
}