angular - agm-map 和 agm-marker 拖动
问题描述
这是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>
解决方案
我还希望自动完成功能也仅限于印度尼西亚。
实现方式是什么,请注意我只想将标记移动限制在印度尼西亚,
我不确定您是否可以在 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 是否在印度尼西亚范围内,然后您可以将标记保持在这些范围内的任何位置,否则不要将其添加到地图中。如果纬度/经度存在于任何给定的范围内,您可以检查此链接(您可以在谷歌上轻松找到印度尼西亚的范围)。
我还希望自动完成功能也仅限于印度尼西亚。
如果您使用来自 google API 的自动完成功能,您可以将 country 作为查询参数传递给 Indonesia,并且搜索结果将被限制在给定的国家/地区。
您还可以将半径添加到特定搜索,它还可以缩小搜索范围。您可以在此处查看更多文档。
推荐阅读
- twitter-bootstrap - 在 Bootstrap 4 的导航栏中允许 popper.js 用于下拉菜单
- jquery - 如何在移动设备上禁用两指触摸的链接?
- assembly - 在询问 20 个姓名和等级后或当用户在没有输入的情况下点击“Enter”时,输入应该停止
- .htaccess - ERR_TOO_MANY_REDIRECTS 和 301 永久移动
- javascript - JS:将outerHTML保存和恢复到本地存储,没有库,没有jquery
- reactjs - 父组件和子组件中的handleChange?
- php - 在codeigniter中下载zip后如何重定向到base_url
- python - 如何在 spacy 中使用引理获得形容词或副词的基本形式
- php - 将 MongoDB ObjectID 符号链接到 Mysql mongoId 属性(FK)
- sql - 为什么 count 忽略分组依据