Блог

Я пытаюсь работать с API геокодирования OpenWeather(https://openweathermap.org/api/geocoding-api#reverse_how), но я не могу заставить его работать. Я пытаюсь получить широту и долготу мест, когда нажимается кнопка, и прямо сейчас я пытаюсь получить ее из Лондона, поэтому в вызове API я указал Лондон. Это работает в Postman, и я получаю обратно широту и долготу, а также некоторые другие вещи, которые меня не интересуют. Я пытаюсь распечатать это в консоли, но undefined вместо широты и долготы получаю. Я думаю, что делаю что-то не так в subscribe() методе. Я работаю в Angular, и это то, что у меня есть прямо сейчас:

HTML:

 <nav class="navbar navbar-light bg-primary">
<div class="container-fluid">
<img id="image" src="favicon.ico">
<span class="navbar-text">
  <h3>HetWeerInNederland.nl</h3>
</span>
</div>
</nav>


<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Location" [(ngModel)]="location" aria- 
 label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2" 
 (click)="getCoordinates()">Search</button>
</div>

<div id="map"></div>
 

Машинописный текст:

 import {Component, OnInit} from '@angular/core';
import {WeatherServiceService} from "./Services/weather-service.service";
import {LocationData} from "./models/location-data";

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

location!:string
locationData = new LocationData();
constructor(public weatherService:WeatherServiceService) {
}

ngOnInit() {
if (!navigator.geolocation){
  console.log("location is not supported")
}
navigator.geolocation.getCurrentPosition((position) => {
  const coords = position.coords
  const latLong = [coords.latitude, coords.longitude]
  console.log(
    'lat: ${position.coords.latitude}, lon: ${position.coords.longitude}'
  );
  let mymap = L.map('map').setView(latLong, 13);

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoia29lbnRlcmhlZWdkZSIsImEiOiJja3NpejZibWsxcGFhMzBvZjRlOXhkcWZoIn0.Bs552hPcijlBy1b2kDqfvw', {
    attribution: 'Map data amp;copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
  }).addTo(mymap);

  let marker = L.marker(latLong).addTo(mymap);
});
this.watchPosition();
}

watchPosition(){
let desLat = 0;
let desLon = 0;
let id = navigator.geolocation.watchPosition(position => {
  console.log(
    'lat: ${position.coords.latitude}, lon: ${position.coords.longitude}'
  );
  if (position.coords.latitude === desLat amp;amp; position.coords.longitude === desLon){
    navigator.geolocation.clearWatch(id);
  }
}, (err) => {
  console.log(err);
}, {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0
})
}

getCoordinates(){
this.weatherService.getData().subscribe((data: LocationData) => this.locationData = {
  lat: data.lat,
  lon: data.lon,
  country: data.country
})
console.log(this.locationData.lat, this.locationData.lon, 
this.locationData.country)
}

}
 

Обслуживание:

 import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
import {LocationData} from "../models/location-data";

@Injectable({
providedIn: 'root'
})
export class WeatherServiceService {

constructor(public http: HttpClient) {

}

getData(){
return this.http.get<LocationData>('http://api.openweathermap.org/geo/1.0/direct? 
q=Londonamp;limit=5amp;appid=2a47a80c223baab80003883c31f35729')
}
}
 

Model:

 export class LocationData {
lat!:number
lon!:number
country!:string
}
 

Hopefully somebody can help!