Angular Google Maps 缩放仅工作一次，然后您无法更改缩放值答案

【问题标题】：Angular Google Maps zoom is working just once then you can not change zoom valueAngular Google Maps 缩放仅工作一次，然后您无法更改缩放值
【发布时间】：2018-10-29 12:09:06
【问题描述】：

我正在做一个使用 agm 的项目。除了缩放问题，一切都很好。我在地图上放了很多标记，当我点击其中一个时，我想放大它的纬度和经度。我可以将这个标记纬度和经度居中，但缩放只工作一次而不是第二次。有没有人帮助我。顺便说一句，我是 Angular 的新手。

谢谢。

【问题讨论】：

你能创建一个stackbliz吗？
嗨@Catgrammer 我已经解决了我的问题。感谢您的关注。对于未来，如果有人遇到同样的问题，我会添加我有趣的解决方案：D
我也有同样的问题。对于一些令人费解的原因，任意更改代码放大不起作用！只有增加或减少它。谷歌上根本没有关于它或如何修复它的信息！

标签： angular google-maps maps angular-google-maps

【解决方案1】：

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>

这是我的解决方案（老实说不是解决方案，但有人可能有同样的问题，这可以作为参考）

【讨论】：

老实说，如果能更完整地描述您是如何解决问题的，那就太好了
@aless80 我很抱歉，但正如我写的答案一样。 // this is not working--> this.mapZoom=14; //But this is working(interesting !) this.mapZoom= this.mapZoom+0.5; 如果我尝试直接分配数字缩放不起作用。但是，如果你用少量增加它，它会起作用。

【解决方案2】：

在 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 经过一整天的查找和搜索，我得到了解决方案。

地点变更，在 AGM 地图中搜索位置。动态重置缩放。

【讨论】：

【解决方案3】：

我遇到了同样的问题，现在我有答案了。 [zoom]="zoomagm-map 不再接受相同的值。

试试这个?

zm = true

if(this.zm){
          this.zm = false
          this.zoom = 8;
          
        }
        else{
          this.zm = true
          this.zoom = 7;
        }

【讨论】：