Angular Google 地图缩放功能只能使用一次,因此您无法更改缩放值
Angular Google Maps zoom is working just once then you can not change zoom value
我正在做一个使用 agm 的项目。除了缩放问题,一切都很好。我在地图上放了很多标记,当我点击其中一个标记时,我想缩放它的纬度和经度。我可以将这个标记的纬度和经度居中,但缩放只能工作一次,而不是第二次。有没有人帮我解决这个问题。顺便说一句,我是 Angular 的新手。
谢谢。
cityInfo(i){
this.latitude=this.parkandFlyCenter[i].lat;
this.longitude=this.parkandFlyCenter[i].lon;
// this is not working--> this.mapZoom=14;
//But this is working(interesting !)
this.mapZoom= this.mapZoom+0.5;
}
<agm-map class="agm-map"
[latitude]="latitude"
[longitude]="longitude"
minZoom="3"
[zoom]="mapZoom"
[styles]="styles"
[mapTypeControl]="true"
[mapTypeControlOptions]="mapType"
(centerChange)="centerChange($event)"
(zoomChange)="zoomChange($event)"
(boundsChange)="boundsChange($event)"
>
<agm-marker-cluster [styles]="clusterStyles">
<agm-marker *ngFor="let city of Cities; let i = index"
[latitude]="city.lat"
[longitude]="city.lon"
[iconUrl]="icon"
[label]="{color: 'white', text: sometext}"
(markerClick)="cityInfo(i)">
</agm-marker>
</agm-marker-cluster>
</agm-map>
这是我的解决方案(老实说不是解决方案,但有人可能有同样的问题,这可以作为参考)
在HTML文件中-----
<agm-map #gm [latitude]="latitude"
[longitude]="longitude"
[zoom]="zoom"
(zoomChange)="changeMapZoom($event)" ---> You need to add this
>
....
....
</agm-map>
并且在TS文件中
changeMapZoom(e: any): any {
this.zoom = e; ---> here i set zoom level according to my need.
}
您可以在任何具有缩放级别值的函数中传递此函数。
对于前。您需要搜索位置然后查看下面的代码。
this.mapsAPILoader.load().then(() => {
this.setCurrentLocation();
this.geoCoder = new google.maps.Geocoder();
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
autocomplete.addListener('place_changed', () => {
this.ngZone.run(() => {
// get the place result
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
// verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
// set latitude, longitude and zoom
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.changeMapZoom(18); -------------> here i pass zoom level value
});
});
});
希望对大家有所帮助。 B'cos 经过一整天的查找和搜索,我得到了解决方案。
Place change, search location in AGM map. reset zoom dynamically.
我遇到了同样的问题,现在我有了答案。 [zoom]="zoom
agm-map 不再接受相同的值。
试试这个
zm = true
if(this.zm){
this.zm = false
this.zoom = 8;
}
else{
this.zm = true
this.zoom = 7;
}
我正在做一个使用 agm 的项目。除了缩放问题,一切都很好。我在地图上放了很多标记,当我点击其中一个标记时,我想缩放它的纬度和经度。我可以将这个标记的纬度和经度居中,但缩放只能工作一次,而不是第二次。有没有人帮我解决这个问题。顺便说一句,我是 Angular 的新手。
谢谢。
cityInfo(i){
this.latitude=this.parkandFlyCenter[i].lat;
this.longitude=this.parkandFlyCenter[i].lon;
// this is not working--> this.mapZoom=14;
//But this is working(interesting !)
this.mapZoom= this.mapZoom+0.5;
}
<agm-map class="agm-map"
[latitude]="latitude"
[longitude]="longitude"
minZoom="3"
[zoom]="mapZoom"
[styles]="styles"
[mapTypeControl]="true"
[mapTypeControlOptions]="mapType"
(centerChange)="centerChange($event)"
(zoomChange)="zoomChange($event)"
(boundsChange)="boundsChange($event)"
>
<agm-marker-cluster [styles]="clusterStyles">
<agm-marker *ngFor="let city of Cities; let i = index"
[latitude]="city.lat"
[longitude]="city.lon"
[iconUrl]="icon"
[label]="{color: 'white', text: sometext}"
(markerClick)="cityInfo(i)">
</agm-marker>
</agm-marker-cluster>
</agm-map>
这是我的解决方案(老实说不是解决方案,但有人可能有同样的问题,这可以作为参考)
在HTML文件中-----
<agm-map #gm [latitude]="latitude"
[longitude]="longitude"
[zoom]="zoom"
(zoomChange)="changeMapZoom($event)" ---> You need to add this
>
....
....
</agm-map>
并且在TS文件中
changeMapZoom(e: any): any {
this.zoom = e; ---> here i set zoom level according to my need.
}
您可以在任何具有缩放级别值的函数中传递此函数。 对于前。您需要搜索位置然后查看下面的代码。
this.mapsAPILoader.load().then(() => {
this.setCurrentLocation();
this.geoCoder = new google.maps.Geocoder();
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
autocomplete.addListener('place_changed', () => {
this.ngZone.run(() => {
// get the place result
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
// verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
// set latitude, longitude and zoom
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.changeMapZoom(18); -------------> here i pass zoom level value
});
});
});
希望对大家有所帮助。 B'cos 经过一整天的查找和搜索,我得到了解决方案。
Place change, search location in AGM map. reset zoom dynamically.
我遇到了同样的问题,现在我有了答案。 [zoom]="zoom
agm-map 不再接受相同的值。
试试这个
zm = true
if(this.zm){
this.zm = false
this.zoom = 8;
}
else{
this.zm = true
this.zoom = 7;
}