agm-map & agm-marker 拖动

Question

这是为印度尼西亚添加我的 agm-map 的代码。现在中心在经纬度的雅加达，整个地图显示在地图部分。
我想要的是只允许标记移动到印度尼西亚国家。

如何实现，请注意我只想限制印度尼西亚的标记移动，但我想显示整个世界地图。
而且我还希望自动完成也仅限于印度尼西亚。

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  NgZone,
} from '@angular/core';
import { MapsAPILoader, MouseEvent } from '@agm/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title: string = '';
  latitude: number = -6.2146;
  longitude: number = 106.8451;
  zoom!: number;
  address!: string;
  fullAddress!: string;
  private geoCoder!: google.maps.Geocoder;

  @ViewChild('search')
  public searchElementRef!: ElementRef;

  constructor(private mapsAPILoader: MapsAPILoader, private ngZone: NgZone) {}

  ngOnInit() {
    this.mapsAPILoader.load().then(() => {
      this.setCurrentLocation();
      this.geoCoder = new google.maps.Geocoder();
      

      let autocomplete = new google.maps.places.Autocomplete(
        this.searchElementRef.nativeElement
      );
      autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 12;
          this.getAddress(this.latitude, this.longitude);
        });
      });
    });
  }

  private setCurrentLocation() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
       /*  this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude; */
        this.zoom = 8;
        this.getAddress(this.latitude, this.longitude);
      });
    }
  }

  markerDragEnd($event: MouseEvent) {
    console.log($event);
    this.latitude = $event.coords.lat;
    this.longitude = $event.coords.lng;
    this.getAddress(this.latitude, this.longitude);
  }

  getAddress(latitude: number, longitude: number) {
    this.geoCoder.geocode(
      { location: { lat: latitude, lng: longitude } },
      (results: any, status: string) => {
        console.log(latitude, longitude);
        if (status === 'OK') {
          if (results[0]) {
            // console.log('Location: ' + results[0].formatted_address);
            let houseNumber = '';
            let streetName = '';
            let neighborhood = '';
            let cityName = '';
            let stateName = '';
            let countryName = '';
            let shortAddress = '';
            let zipCode = '';

            // console.log(results[0].address_components.length);
            console.log(results[0].address_components);

            if (results[0].address_components.length === 3) {
              if (results[0].address_components[0].long_name !== null) {
                cityName = results[0].address_components[0].long_name;
              }

              if (results[0].address_components[1].short_name) {
                stateName = results[0].address_components[1].short_name;
              }

              if (results[0].address_components[2].short_name !== null) {
                countryName = results[0].address_components[2].short_name;
              }
            }

            if (results[0].address_components.length === 4) {
              if (results[0].address_components[0].long_name !== null) {
                streetName = results[0].address_components[0].long_name;
              }

              if (results[0].address_components[1].long_name !== null) {
                cityName = results[0].address_components[1].long_name;
              }

              if (results[0].address_components[2].short_name) {
                stateName = results[0].address_components[2].short_name;
              }

              if (results[0].address_components[3].short_name !== null) {
                countryName = results[0].address_components[3].short_name;
              }
            }

            if (results[0].address_components.length === 5) {
              if (results[0].address_components[0].long_name !== null) {
                streetName = results[0].address_components[0].long_name;
              }

              if (results[0].address_components[1].long_name !== null) {
                cityName = results[0].address_components[1].long_name;
              }

              if (results[0].address_components[2].short_name !== null) {
                stateName = results[0].address_components[2].short_name;
              }

              if (results[0].address_components[3].short_name !== null) {
                countryName = results[0].address_components[3].short_name;
              }

              if (results[0].address_components[4].short_name !== null) {
                zipCode = results[0].address_components[4].short_name;
              }
            }

            if (results[0].address_components.length === 6) {
              if (results[0].address_components[0].long_name !== null) {
                houseNumber = results[0].address_components[0].long_name;
              }

              if (results[0].address_components[1].long_name !== null) {
                streetName = results[0].address_components[1].long_name;
              }

              if (results[0].address_components[2].long_name !== null) {
                cityName = results[0].address_components[2].long_name;
              }

              if (results[0].address_components[3].short_name) {
                stateName = results[0].address_components[3].short_name;
              }

              if (results[0].address_components[4].short_name !== null) {
                countryName = results[0].address_components[4].short_name;
              }
            }

            if (results[0].address_components.length === 7) {
              if (results[0].address_components[0].long_name !== null) {
                houseNumber = results[0].address_components[0].long_name;
              }

              if (results[0].address_components[1].long_name !== null) {
                streetName = results[0].address_components[1].long_name;
              }

              if (results[0].address_components[2].long_name !== null) {
                neighborhood = results[0].address_components[2].long_name;
              }

              if (results[0].address_components[3].long_name !== null) {
                cityName = results[0].address_components[3].long_name;
              }

              if (results[0].address_components[4].short_name) {
                stateName = results[0].address_components[4].short_name;
              }

              if (results[0].address_components[5].short_name !== null) {
                countryName = results[0].address_components[5].short_name;
              }
            }

            if (cityName !== '') {
              shortAddress = cityName;
            }
            if (cityName !== '' && stateName !== '') {
              shortAddress += '-' + stateName;
            }
            if (shortAddress !== '' && countryName !== '') {
              shortAddress += ', ' + countryName;
            }
            if (cityName === '' && stateName === '' && countryName === '') {
              shortAddress = '???';
            }

            console.log('shortAddress:', shortAddress);

            // Set addresses
            this.address = shortAddress;
            this.fullAddress = results[0].formatted_address;

            const newPlace = {
              lat: this.latitude,
              lng: this.longitude,
              shortAddress: this.address,
              fullAddress: this.fullAddress,
            };
            console.log(newPlace);
            // this.events.publish('location:changed', newPlace);
          } else {
            window.alert('No results found');
          }
        } else {
          window.alert('Geocoder failed due to: ' + status);
        }
      }
    );
  }
}

Below is Front-end
<div class="container">
  <h1>Angular Google Map with Search Box Example - ItSolutionStuff.com</h1>

  <div class="form-group">
    <label>Enter address</label>
    <input
      type="text"
      class="form-control"
      (keydown.enter)="$event.preventDefault()"
      placeholder="Search Nearest Location"
      autocorrect="off"
      autocapitalize="off"
      spellcheck="off"
      type="text"
      #search
    />
  </div>

  <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <agm-marker
      (dragEnd)="markerDragEnd($event)"
      [latitude]="latitude"
      [longitude]="longitude"
      [markerDraggable]="true"
    ></agm-marker>
  </agm-map>

  <h5>Address: {{ fullAddress }}</h5>
  <div>Latitude: {{ latitude }}</div>
  <div>Longitude: {{ longitude }}</div>
</div>

Answer 1

我还希望自动完成也仅限于印度尼西亚。

What is the way achieve, please note i want to restrict only marker movement to Indonesia,

我不确定你是否可以在 agm-map 上明确地这样做，他们使用 lat lng 对区域本身提供限制并将其传递给 restriction 输入属性.但是，它不允许显示其他国家/地区。所以它不会工作。（我添加它以供参考）。

 countryRestriction = {
    latLngBounds: {
      east: 14.49234,
      north: 45.808455,
      south: 45.81792,
      west: 5.95608
    },
    strictBounds: true
  };

像这样将此配置传递给 agm：

<agm-map 

  [restriction]="countryRestriction"
  [disableDefaultUI]="false"
  [zoomControl]="false"
  (mapClick)="mapClicked($event)">
</agm-map>

您可以检查标记 lat/lng 是否在印度尼西亚边界内，然后您可以将标记保留在这些边界内的任何位置，否则不要将其添加到地图中。如果 lat/lng 存在于任何给定范围内，您可以检查此 link（您可以在 google 上轻松找到印度尼西亚的范围）。

I also want Autocomplete also to be restricted to Indonesia only.

如果您使用 google API 的自动完成功能，您可以将国家/地区作为查询参数传递给印度尼西亚，搜索结果将仅限于给定的国家/地区。

您还可以将半径添加到特定搜索中，它也可以缩小搜索范围。您可以查看 here 以获取更多文档。

agm-map & agm-marker 拖动

agm-map & agm-marker drag

google-maps

angular

agm-map

agm

angular-maps