Я реализовал концепцию 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);
}
}