如何更改 ngx-leaflet 上的运行时坐标？

Question

有没有其他方法可以在运行时更改 ngx-leaflet 地图坐标？这可以通过谷歌地图实现，我正在尝试对传单做同样的事情。

最初设置后，对 leafletOptions 的更改将被忽略。这是因为这些选项被传递到地图构造函数中，因此无论如何都无法更改它们。因此，在创建地图之前请确保该对象存在。您需要在 ngOnInit 中创建对象或使用 *ngIf 隐藏地图 DOM 元素，直到您可以创建选项对象。

成分：

  private   options = {
      layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© OpenStreetMap contributors'
        })
      ],
      zoom: 7,
      center: latLng([ 46.879966, -121.726909 ])
    };

html:

<div style="height: 500px;"
    leaflet
     [leafletOptions]="(options)"
     ></div>

Answer 1

加载地图时，您需要获取对地图的引用，然后使用该引用来更改视图。

成分

import * as L from 'leaflet';
import {
    latLng,
    tileLayer
} from 'leaflet';

map: L.Map;

options = {
    layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'})
    ],
    zoom: 7,
    center: latLng([ 46.879966, -121.726909 ])
};

// get the reference to the map
onMapReady(map: L.Map) {
    this.map = map;
}

// change the view using that map reference to another location
changeView() {
    this.map.panTo(new L.LatLng(40.737, -73.923));
}

模板

<div style="height: 500px;"
    leaflet 
    [leafletOptions]="options"
    (leafletMapReady)="onMapReady($event)">
</div>

<button (click)="changeView()">Change view</button>

演示