Обратное геокодирование в mapbox angular9 - PullRequest
Новая
       92

Обратное геокодирование в mapbox angular9

0 голосов
/ 08 мая 2020

Я реализовал концепцию mapbox в angular. Я также добавил на карту маркер, определяющий текущее местоположение. На данный момент iam дает жестко запрограммированное текущее местоположение (вместе с широтой и долготой) через json файл. Теперь я действительно хочу определить текущее местоположение, то есть я хочу реализовать концепцию обратного геокодирования, указав широту и долготу в качестве входных данных. Как мне go about?

Текущий код, который iam работает над выглядит так: 

import { Component,  OnDestroy, AfterViewInit, OnInit } from '@angular/core';

import { NavigationControl, Map } from 'mapbox-gl';

import {ActivatedRoute, Router,ParamMap } from '@angular/router';

import { environment } from 'src/environments/environment';

import * as mapbox from 'mapbox-gl';

(mapbox as any).accessToken = environment.mapbox.accessToken

@Component({

  selector: 'app-dashboard',

  templateUrl: './dashboard.component.html',

  styleUrls: ['./dashboard.component.css'],
})
export class DashboardComponent implements OnInit,AfterViewInit {

  latlng:any;
  constructor(private route:ActivatedRoute,
          private router:Router)
  {


            this.loadMap();


  }
  ngOnInit() {
  }
  ngAfterViewInit(){
  }
  loadMap(){

    var latitude=this.latitude;
    var longitude=this.longitude;
    this.latlng=[longitude,latitude]

    var map1=new Map(
      {
        container:'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: { lng: longitude, lat: latitude },
        zoom: 9,
        pitch: 20,
        attributionControl: false
      });
      map1.addControl(
        new NavigationControl({
          showZoom: true,
          showCompass: true
        }),
        'top-right'
      );



      var el = document.createElement('div');
      el.style.backgroundImage = "url('../../assets/images/truck.png')";
      el.style.backgroundSize='cover';
      el.style.width = '50px';
      el.style.height = '50px';  
      el.style.marginTop='-35px'
      el.style.cursor='pointer';



      new mapbox.Marker(el)
      .setLngLat(this.latlng)
      .setPopup(new mapbox.Popup({offset:25})
      .setHTML('<p>'+this.orderItem.current_location+'</p>'))
      .addTo(map1);

    }
}

1 Ответ

0 голосов
/ 08 мая 2020

Вы можете получить текущую позицию, используя элемент управления геолокацией: 

navigator.geolocation.getCurrentPosition(success, error, options);

Вам нужно будет вызвать его с такими параметрами, как эти: 

  var options = {
		  enableHighAccuracy: true,
		  timeout: 5000,
		  maximumAge: 0
		};

Вам нужно будет реализовать обратные вызовы ошибок и успешных действий: 

function error(err) {
		  console.warn(`ERROR(${err.code}): ${err.message}`);
      }

В случае успеха вы можете использовать возвращенные координаты. Вы можете, например, использовать их в запросе обратного геокодирования. 

function success(pos) {
		  var crd = pos.coords;

		  console.log('Your current position is:');
		  console.log(`Latitude : ${crd.latitude}`);
		  console.log(`Longitude: ${crd.longitude}`);
		  console.log(`More or less ${crd.accuracy} meters.`);
      }

См. Также эту документацию:

https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

Сообщите мне, если что-то неясно!

...