【问题标题】:Is there any way to fit agm-polyline inside map in angular 7有什么方法可以将 agm-polyline 放入 Angular 7 中的地图内
【发布时间】:2020-08-04 23:57:24
【问题描述】:

我想将折线放入我的地图中,并希望根据折线的大小和折线的位置动态设置缩放级别 我的代码在这里:

  <agm-map style="height: 500px" [latitude]='selectedLatitude' [longitude]='selectedLongitude'
    *ngIf='xPolyline.length'>
    <agm-polyline *ngFor='let polyline of xPolyline' [strokeColor]="'#0000ff'" [strokeOpacity]="0.9">
      <agm-polyline-point *ngFor="let point of polyline;let i = index;" [latitude]="point.latitude"
        [longitude]="point.longitude">
      </agm-polyline-point>
    </agm-polyline>
  </agm-map>

【问题讨论】:

    标签: angular typescript angular7 angular-google-maps


    【解决方案1】:

    &lt;agm-map ... [fitBounds]="true"&gt;&lt;/agm-map&gt;

    &lt;agm-polyline-point ... [agmFitBounds]="true"&gt;&lt;/agm-polyline-point&gt;

    无需进一步计算或额外调用。 AGM 会即时为您计算。

    【讨论】:

      【解决方案2】:
      this.agmMap.mapReady.subscribe(map => {
         const bounds: LatLngBounds = new google.maps.LatLngBounds();
         for (const mm of polyline) {
            bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
         }
         map.fitBounds(bounds);
      });
      

      这里的标记是所有可用纬度和经度的数组。这将设置缩放级别以适合地图中的所有折线点。

      【讨论】:

      • 如何定义“this.agmMap”来引用它?
      • @JoachimBülow 您由 ViewChild 引用,但请查看我接受的答案,这是实现目标的一种非常简单的方法,不需要任何类似的程序。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-07-01
      • 1970-01-01
      • 2021-01-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多