时间戳

首页 > 解决方案 > 如何使用 Leaflet 和 OpenStreetMap 将我的地图视图重置回我在 Ionic 中的位置？

angular - 如何使用 Leaflet 和 OpenStreetMap 将我的地图视图重置回我在 Ionic 中的位置？

问题描述

现在我正在 Ionic v4 中开发基于位置的应用程序。现在我希望能够将地图视图重置回我的位置。我想我需要setView再次使用来实现这一点，但我不知道这样做的语法。

这是我到目前为止所获得的所有相关代码：

主页.html

<ion-content>
  <div class="home-button" (click)="centerMap()">
    <ion-icon name="navigate"></ion-icon>
  </div>
  <div id="map"></div>
</ion-content>

主页.ts

centerMap() {
    this.mapService.backToCenter();
}

地图服务.ts

loadmap(map) {
    this.map = map;
    this.map.locate({
        setView: true,
        maxZoom: 22,
        minZoom: 12
    })
    .on('locationfound', e => {
        const markerGroup = leaflet.featureGroup();
        const marker: any = leaflet
            .marker([e.latitude, e.longitude], {
                icon: positionIcon,
                zIndexOffset: -1000
            })
            .on('click', () => {
                console.log('Position marker clicked');
            });
        markerGroup.addLayer(marker);
        this.map.addLayer(markerGroup);
        this.loadMarkers(this.dropService.getDrops());
    });
    return this.map;
}
backToCenter() {
    console.log('Center Map');
}

有没有办法setView在点击按钮时触发新的？

标签： angulartypescriptionic-frameworkleafletopenstreetmap

解决方案

您可以将初始位置和缩放级别存储在变量中，并使用 map.setView 方法在单击按钮时返回初始位置。

backToCenter(){
    map.setView([latitude, longitude], zoom);
}

推荐阅读