限制到agm-map中的特定国家/地区

Question

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

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

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>

maps.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属性。

例如，为了将地图限制到瑞士，我执行以下操作(注意countryRestriction字段)

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

你可以在stackblitz上看到一个仅限于瑞士的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'}
  };
}