仅限于agm地图中的特定国家/地区 [英] Restrict to a specific country in agm-map

问题描述

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

Below is my code which I'm able to plot the points on map. But I want my map to restrict to one country. How can this be achieved in agm-map?

例如，我希望仅将其限制在澳大利亚西部.

Example, I want it to be restricted to only western Australia.

maps.html

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

推荐答案

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

In order to show only one country or only one region on AGM map you have to apply view port restriction. Official documentation provides the following page to explain the stuff:

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

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

The AGM map supports restriction property, so you just need to add restriction in your component class and add restriction attribute in your html template.

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

E.g. to limit a map to Switzerland I do the following (note countryRestriction field)

@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中添加我的限制

and add my restriction in 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地图的完整示例:

You can see a complete example of the AGM map limited to Switzerland on stackblitz:

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

这篇关于仅限于agm地图中的特定国家/地区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！