Question

还有其他方法可以在运行时更改ngx-leaflet地图坐标吗？使用Google地图是可能的，而我正尝试使用传单做同样的事情。

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

组件：

  private   options = {
      layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; 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: '&copy; 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>

Demo

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

1 个答案: