mapbox angular9中的逆向地理编码

import { Component, OnInit } from '@angular/core';
import mapboxgl from 'mapbox-gl';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map: mapboxgl.Map;

  ngOnInit() {
    // 设置Mapbox访问令牌
    mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

    // 创建地图实例
    this.map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat], // 设置地图中心点的经纬度
      zoom: 12 // 设置地图缩放级别
    });

    // 添加逆向地理编码功能
    this.map.on('click', (e) => {
      const lngLat = e.lngLat;
      this.reverseGeocode(lngLat.lng, lngLat.lat);
    });
  }

  reverseGeocode(lng: number, lat: number) {
    // 调用Mapbox Geocoding API的逆向地理编码接口
    fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${lng},${lat}.json?access_token=${mapboxgl.accessToken}`)
      .then(response => response.json())
      .then(data => {
        const address = data.features[0].place_name;
        console.log(address);
        // 在地图上显示地址信息
        new mapboxgl.Popup()
          .setLngLat([lng, lat])
          .setHTML(`<p>${address}</p>`)
          .addTo(this.map);
      });
  }
}