代码之家 › 专栏 › 技术社区 › John

如何更改NGX传单上的坐标运行时?

ngx-leaflet maps angular

John · 技术社区 · 6 年前

在运行时更改NGX传单地图坐标还有其他选择吗? 这在谷歌地图上是可能的,我也在试着用传单做同样的事。

对传单的更改在初始设置后将被忽略。这是因为这些选项被传递到映射构造函数中,所以无论如何都不能更改它们。因此,在创建映射之前,请确保对象存在。您将希望在ngoninit中创建该对象,或使用*ngif隐藏map dom元素,直到可以创建选项对象。

组件:

  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>

1 回复 | 直到 6 年前

kboul 6 年前

加载映射时,需要获取对该映射的引用,然后使用该引用更改视图。

成分

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

推荐文章

ANDREW EBARE · 如何按键对颤振中的地图进行排序

2 年前

user5405873 · 如何缩放距离标记15km半径内的区域

6 年前

Vpa · 谷歌地图在模态中只显示灰色,双击后显示

6 年前

Andre Frota · 映射API图标。scaledSize不工作

6 年前

JeanBertin · 使用R googlemap包按簇收集标记

6 年前

Diego Aguirre GarcÃa · 错误C2146:语法错误:按函数传递映射时,标识符mType之前缺少“,”

7 年前

Kaizer69 · 当用户当前位置更改时,订阅xamarin地图/地理定位器事件

7 年前

billy · 从连接到键的哈希集中删除值?

7 年前

Marc · 钛移动销坐标

7 年前

Srivignesh · 在地图中合并条目,而不使用scala中的循环

7 年前