如何在角度应用程序中将当前位置放置在传单打开的街道地图中答案

【问题标题】：How to place the current locations in leaflet open street map in angular application如何在角度应用程序中将当前位置放置在传单打开的街道地图中
【发布时间】：2020-11-29 21:24:57
【问题描述】：

我有一个角度应用程序，我已经使用传单开放街道地图放置了地图。我需要放置该地图的当前纬度和经度。（必须根据位置进行更改）。 我的问题是如何使用传单地图放置地图的当前坐标。

而我的 component.ts 代码是

.component.ts

 var  map = L.map('map').setView([13.0827, 80.2707], 3);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

    
} ).addTo(map);

【问题讨论】：

标签： html angular typescript leaflet angular8

【解决方案1】：

您可以使用导航器获取当前位置坐标

ngOnInit(){
   if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.setGeoLocation.bind(this));
   }
}

setGeoLocation(position: { coords: { latitude: any; longitude: any } }) {
   const {
      coords: { latitude, longitude },
   } = position;

   const  map = L.map('map').setView([latitude, longitude], 3);

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

当应用程序加载 setGeoLocation 函数最初触发并更新传单地图时，在您的 App.component.ts 中添加此项。

希望这行得通！

【讨论】：