agm-map &agm-标记拖动

Question

这是为印度尼西亚添加我的agm-map的代码。现在的中心是雅加达，按纬度和经度计算，地图部分显示整个地图。

我想要的是允许标记移动到印度尼西亚国家。

实现什么方式，请注意，我只想限制标记移动到印度尼西亚，但我想显示整个世界的地图。

我也希望Autocomplete也只限于印度尼西亚。

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

我也希望自动完成也被限制在印度尼西亚。

实现什么目的，请注意，我只想限制标记移动到印度尼西亚，

我不确定您是否能够在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存在于任何给定的边界中(您可以很容易地在google上找到印度尼西亚的边界)。

我也希望自动完成也被限制在印度尼西亚。

如果您使用的是google中的autocomplete，您可以将country作为查询param传递给印度尼西亚，并且搜索结果将仅限于给定的国家。

您也可以将半径添加到特定的搜索中，它也缩小了搜索范围。您可以查看这里获得更多文档。