установить текущий маркер местоположения - PullRequest
Новая
       18

установить текущий маркер местоположения

0 голосов
/ 19 мая 2018

Я работал над этим учебным пособием и запустил его.Теперь я хочу получить текущее местоположение браузера и установить для него маркер на MapReady.Я довольно новичок в программировании, и я только начинаю изучать Angular, поэтому извините за этот вопрос Noobie: D

Все примеры, которые я нашел (например, this например) из листовкине работают для меня, так как я не могу перевести их в свой проект 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
    });
  }

}
...