1

我完成了本教程，并将其全部启动并运行。现在我想获取我当前的浏览器位置并在 MapReady 上为其设置一个标记。我对编程很陌生，我刚刚开始学习 Angular，很抱歉这个菜鸟问题：D

我从传单中找到的所有示例（例如这个示例）都不适合我，因为我无法将它们翻译到我的 Angular 项目中。

有人可以帮我弄这个吗？

这是我来自 component.ts 的代码

    import { Component } from '@angular/core';
import { icon, latLng, marker, polyline, tileLayer, Map, point } from 'leaflet';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {



  // Define our base layers so we can reference them multiple times
  googleMaps = tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });
  googleHybrid = tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });
  OSM =  tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  });

  // Marker for the top of Mt. Ranier
  currentLocation = marker([ 46.8523, -121.7603 ], {
    icon: icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    }),
    title: "I am here"
  });

  // Path from paradise to summit - most points omitted from this example for brevity
  route = polyline([[ 46.78465227596462,-121.74141269177198 ],
    [ 46.80047278292477, -121.73470708541572 ],
    [ 46.815471360459924, -121.72521826811135 ],
    [ 46.8360239546746, -121.7323131300509 ],
    [ 46.844306448474526, -121.73327445052564 ],
    [ 46.84979408048093, -121.74325201660395 ],
    [ 46.853193528950214, -121.74823296256363 ],
    [ 46.85322881676257, -121.74843915738165 ],
    [ 46.85119913890958, -121.7519719619304 ],
    [ 46.85103829018772, -121.7542376741767 ],
    [ 46.85101557523012, -121.75431755371392 ],
    [ 46.85140013694763, -121.75727385096252 ],
    [ 46.8525277543813, -121.75995212048292 ],
    [ 46.85290292836726, -121.76049157977104 ],
    [ 46.8528160918504, -121.76042997278273 ]]);

  // Layers control object with our two base layers and the three overlay layers
  layersControl = {
    baseLayers: {
      'Google Maps': this.googleMaps,
      'Google Hybrid': this.googleHybrid,
      'OSM': this.OSM
    },
    overlays: {
      'My Location': this.currentLocation,
      'Mt. Rainier Climb Route': this.route

    }
 /*    overlays: {
      'Mt. Rainier Summit': this.summit,
      'Mt. Rainier Paradise Start': this.paradise,
      'Mt. Rainier Climb Route': this.route
    } */
  };


  // Set the initial set of displayed layers (we could also use the leafletLayers input binding for this)
  options = {
    /* layers: [ this.googleMaps, this.route, this.summit, this.paradise ], */
    layers: [ this.googleMaps, this.currentLocation,this.route], 
    zoom: 7,
    center: latLng([ 46.879966, -121.726909 ])
  };

  onMapReady(map: Map) {
    map.fitBounds(this.route.getBounds(),{
      padding: point(24, 24),
      maxZoom: 12,
      animate: true
    });
  }

}
4

1 回答 1

0

Angular 没有任何内置工具来使用 Geolocation API。这是一个Observable基于地理定位 API 的抽象，可与 Angular 一起使用

如何使用 Usage 非常简单：只需在组件中导入服务并订阅它。服务扩展Observable并将发出Position对象。

import {GeolocationService} from '@ng-web-apis/geolocation';

// ...

constructor(private readonly geolocation$: GeolocationService) {}

getPosition() {
       geolocation$.subscribe(position => 
        doSomethingWithPosition(position));
   }

您也可以使用异步管道

<app-component-using-position [position]="geolocation$ | async"></app-component-using-position>

单仓

如果您只需要获取一次位置并停止观察用户位置，您可以订阅geolocation$并使用take(1)RxJs 运算符。服务是冷的，这意味着如果没有订阅者，它就不会跟踪位置。

https://ng-web-apis.github.io/geolocation/

https://www.npmjs.com/package/@ng-web-apis/geolocation

于 2021-02-02T13:35:43.030 回答