在年度股东大会地图中限制为特定国家/地区

Question

下面是我的代码，我可以在地图上绘制点。但我希望我的地图仅限于一个国家。如何在 agm 地图中实现这一点？

例如，我希望它仅限于西澳大利亚州。

地图.html

<agm-map 
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
[disableDefaultUI]="false"
[zoomControl]="false"
(mapClick)="mapClicked($event)">
<agm-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)">
<agm-info-window>
<strong>InfoWindow content</strong>
</agm-info-window>
</agm-marker>
<agm-circle [latitude]="lat + 0.3" [longitude]="lng" 
[radius]="5000"
[fillColor]="'red'"
[circleDraggable]="true"
[editable]="true">
</agm-circle>
</agm-map>

地图.ts

import { Component } from '@angular/core';
import { MouseEvent } from '@agm/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
// google maps zoom level
zoom: number = 8;
// initial center position for the map
lat: number = 51.673858;
lng: number = 7.815982;
clickedMarker(label: string, index: number) {
console.log(`clicked the marker: ${label || index}`)
}
mapClicked($event: MouseEvent) {
this.markers.push({
lat: $event.coords.lat,
lng: $event.coords.lng,
draggable: true
});
}
markerDragEnd(m: marker, $event: MouseEvent) {
console.log('dragEnd', m, $event);
}
markers: marker[] = [
{
lat: 51.673858,
lng: 7.815982,
label: 'A',
draggable: true
},
{
lat: 51.373858,
lng: 7.215982,
label: 'B',
draggable: false
},
{
lat: 51.723858,
lng: 7.895982,
label: 'C',
draggable: true
}
]
}
// just an interface for type safety.
interface marker {
lat: number;
lng: number;
label?: string;
draggable: boolean;
}

Answer 1

为了在 AGM 地图上仅显示一个国家或一个地区，您必须应用视口限制。官方文档提供了以下页面来解释这些内容：

https://developers.google.com/maps/documentation/javascript/examples/control-bounds-restriction

AGM 映射支持限制属性，因此您只需在组件类中添加限制并在 html 模板中添加restriction属性。

例如，要将地图限制为瑞士，我执行以下操作(注意国家/地区限制字段(

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
// google maps zoom level
zoom: number = 5;
// initial center position for the map
lat: number = 46.7985624;
lng: number = 8.2319736;
//view port restrictions
countryRestriction = {
latLngBounds: {
east: 10.49234,
north: 47.808455,
south: 45.81792,
west: 5.95608
},
strictBounds: true
};
clickedMarker(label: string, index: number) {
console.log(`clicked the marker: ${label || index}`)
}
mapClicked($event: MouseEvent) {
this.markers.push({
lat: $event.coords.lat,
lng: $event.coords.lng,
draggable: true
});
}
markerDragEnd(m: marker, $event: MouseEvent) {
console.log('dragEnd', m, $event);
}
markers: marker[] = [
{
lat: 47.4052961,
lng: 8.6011908,
label: 'A',
draggable: true
},
{
lat: 46.9728419,
lng: 7.4304635,
label: 'B',
draggable: false
},
{
lat: 46.2585634,
lng: 6.2226607,
label: 'C',
draggable: true
}
]
}

并在 HTML 中添加我的限制

<agm-map 
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
[restriction]="countryRestriction"
[disableDefaultUI]="false"
[zoomControl]="false"
(mapClick)="mapClicked($event)">
<agm-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)">

<agm-info-window>
<strong>InfoWindow content</strong>
</agm-info-window>

</agm-marker>
</agm-map>

您可以在堆栈闪电战中看到仅限于瑞士的 AGM 地图的完整示例：

https://stackblitz.com/edit/angular-google-maps-demo-bul5fg

Answer 2

export class MapComponent {
title = 'angular-maps';
@ViewChild('placesRef') placesRef: GooglePlaceDirective;
options = {
types: [],
componentRestrictions: {country: 'CO'}
};
}