這是agm-map為印度尼西亞添加 my 的代碼。現在中心在雅加達，按緯度和經度和整個地圖顯示在地圖部分。
我想要的是只允許標記移動到印度尼西亞國家。
實作的方式是什么，請注意我只想將標記移動限制在印度尼西亞，但我想顯示整個世界地圖。
而且我還希望自動完成也僅限于印度尼西亞。
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 >
<h1>Angular Google Map with Search Box Example - ItSolutionStuff.com</h1>
<div >
<label>Enter address</label>
<input
type="text"
(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>
uj5u.com熱心網友回復：
我還希望自動完成也僅限于印度尼西亞。
實作的方式是什么，請注意我只想將標記移動限制在印度尼西亞，
我不確定您是否可以在 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 API 的自動完成功能，您可以將國家作為查詢引數傳遞給印度尼西亞，搜索結果將僅限于給定的國家/地區。
您還可以將半徑添加到特定搜索，它還可以縮小搜索范圍。您可以在此處查看更多檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/326189.html
上一篇：谷歌地圖在頁面導航時顯示部分地圖