刷新Leftlet地图的下拉角度2

我是Angular2和Leaflet Map的新手。我正在尝试创建一个下拉菜单，该更改会将地图更新为新的地图。例如，如果下拉值是伦敦，它将显示伦敦的地图位置，如果我将下拉值更改为纽约，地图将重新定位到纽约。刷新Leftlet地图的下拉角度2

侧nav.component.ts - >我在这里的下拉代码是有

<select class="form-control" [(ngModel)]="selectedGeo" > 
     <option value="" nonselected class="nonvalue">--Select--</option> 
     <option *ngFor="let geoArea of geoAreas" value="{{geoArea.value}}"> 
      {{geoArea.value}} 
     </option> 
     </select>

侧nav.component.ts - >

geoAreas: Array<Object> =[] = [ 
{"id":"1","value":"New York"}, 
{"id":"2","value":"London"}, 
{"id":"3","value":"India"}

]。

map.component.html

<div class="col-8"> 
    <div class="card"> 
     <div id="londonMap" style="height: 500px"></div> 
</div>

map.component.ts

import { Component, OnInit } from '@angular/core'; 
import * as L from "leaflet"; 
import { Map } from "leaflet"; 

@Component({ 
    selector: 'app-map', 
    templateUrl: './map.component.html', 
    styleUrls: ['./map.component.css'] 
}) 
export class MapComponent implements OnInit { 
    public map: Map; 
    constructor() { } 
    ngOnInit() { 

    this.londonMap = L.map("londonMap", { 
    zoomControl: false, 
     center: L.latLng(51.505, -0.09), 
     zoom: 12, 
     minZoom: 4, 
     maxZoom: 19 
    }); 

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(this.londonMap); 

    this.NYMap = L.map("NYMap", { 
     zoomControl: false, 
     center: L.latLng(42.736424, -75.762713), 
     zoom: 7, 
     minZoom: 4, 
     maxZoom: 19 
    }); 
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(NYMap); 
} 
}

来源

2017-04-26 swastik padhy

欢迎SO！您的代码在哪里处理选择值更改？ – ghybs

而不是改变地图的容器，你可以非常简单地请求当前地图改变其观点，通常使用setView，panTo或甚至flyTo。

如果您只是切换地图容器，并且用户已经在新地图周围移动/平移，他/她只会看到新地图已移至的最后位置，而不是初始位置。

您需要将目标坐标记录到您的select中，或者至少从某个集中变量（可能是您的geoAreas）中检索它们。

这里是flyTo（纯JS）的示例：http://jsfiddle.net/3v7hd2vx/

来源

2017-04-26 03:57:33 ghybs

感谢您的回复。我还有一个问题需要在side-nav.component.ts中从map.component.ts获取地图变量。那就是为什么不能使用这个设置。 –

刷新Leftlet地图的下拉角度2

回答

相关问题