Angular 仅限于agm地图中的特定国家/地区

下面是我的代码，我可以在地图上绘制点。但我希望我的地图只限于一个国家。如何在年度股东大会地图中实现这一点

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

maps.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>

---

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

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

restriction

属性

例如，要限制到瑞士的地图，我执行以下操作（注意countryRestriction字段）

并在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>

---

你只限于一个国家是什么意思？你想让地图只显示一个国家吗？或者你们只想画一个国家的点？如果可能的话，我只想在地图上显示西澳大利亚的一些坐标点@jabamataroI想要西澳大利亚的mapy。可能吗？组件限制：{country:'CO'，postalCode:'YOUR_POSTAL_CODE'}视图子参考应位于agm地图或agm标记？如果可能的话，你可以做一个更好的理解。如果你解释了你提供的代码是如何回答这个问题的，这将是一个更好的答案。谢谢。这就是我要找的for@xomena谢谢你，你的回答帮助了我。你能告诉我如何找到我想要的国家的边界吗？（我应该局限于以色列国，但我还没有找到一种方法来知道所需的经度和纬度）@MiriGold尝试使用地理编码工具来确定以色列的边界：
export class MapComponent {
  title = 'angular-maps';
  @ViewChild('placesRef') placesRef: GooglePlaceDirective;
  options = {
    types: [],
    componentRestrictions: {country: 'CO'}
  };
}

@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
  }
  ]
}

<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>