Javascript 在从获取查询（GeoJSON响应）检索到的点上放置一个弹出窗口

我正在用4.6.5和6编程一个地图。我使用法语，可以构建如下查询：https://api-adresse.data.gouv.fr/reverse/?lon=2.37&lat=48.357. 我的目标是使用浏览器地理定位将lon和lat替换为客户机的真实坐标。我能做的事

在以前的一个项目中，我使用了一些函数，允许我创建一个弹出窗口，其中包含静态GeoJSON文件中的信息，没有可修改的查询，这是可行的，但在本例中不是。我猜函数没有使用GeoJSON文件，因为我收到以下错误：

错误类型错误：无法将属性“innerHTML”设置为null

代码：

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

import Map from 'ol/map';
import WMS from 'ol/source/tilewms';
import TileLayer from 'ol/layer/tile';
import View from 'ol/view';
import OSM from 'ol/source/osm';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/vector';
import Geolocation from 'ol/geolocation';
import GeoJSON from 'ol/format/geojson';
import proj from 'ol/proj';
import Style from 'ol/style/style';
import IconStyle from 'ol/style/icon';
import $ from 'jquery';
import Overlay from 'ol/overlay';

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

map: Map;
view: View;
locationSource: VectorSource;
vectorLayerLocation: VectorLayer;
loc: Style;
popup: Overlay;

  constructor() {
  }

  getLocation() {

    var geolocation = new Geolocation({
      projection: this.view.getProjection()
    });

    geolocation.setTracking(true);

    geolocation.on('change:position', () => {
      var [longitude, latitude] = proj.toLonLat(geolocation.getPosition());
      fetch(`https://api-adresse.data.gouv.fr/reverse/?lon=${longitude}&lat=${latitude}`).then(response => response.json())
        .then(json => {
          var features = (new GeoJSON()).readFeatures(json, <any> {
            featureProjection: 'EPSG:3857'
          })
          var coordinates = geolocation.getPosition();
          this.locationSource.clear();
          this.locationSource.addFeatures(features);
          var pos = geolocation.getPosition();
          this.view.setCenter(pos);
          console.log(this.locationSource.getFeatures()[0].getProperties());
        });
    });
  }

  ngOnInit() {

    this.loc = new Style({
      image: new IconStyle(({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'assets/image/adresse.png'
      }))
    });

    this.view = new View({
      center: [0, 0],
      maxZoom: 19,
      zoom: 10
    });

    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
           source: new OSM()
        })
      ],
      view: this.view

    });

    this.locationSource = new VectorSource();

    this.vectorLayerLocation = new VectorLayer({
      source: this.locationSource,
      style: this.loc
    });

    this.map.addLayer(this.vectorLayerLocation);

    $('#bouton_loc').on('click', function(){
      $('#bouton_loc').attr("disabled", true);
    });

    //popup

    var element = document.getElementById('popup');

    this.popup = new Overlay({
      element: element,
      autoPan: true,
      offset: [0, -30]
    });

    //Display popups

    var content_element = document.getElementById('popup-content');

    this.map.on('click', evt => {

    var feature = this.map.forEachFeatureAtPixel(evt.pixel,
      function(feature) {
        return feature;
      });
    if (feature) {
      var geometry = feature.getGeometry();
      var coord = geometry.getCoordinates();

      if(feature.get('label') != null) {
        var content = '<h2>' + 'Adress : ' + feature.get('label') + '</h2>';
      }

      if(feature.get('context') != null) {
        content += '<h2>' + 'Region : ' + feature.get('context') + '</h2>';
      }

      content_element = document.getElementById('popup-content');
      content_element.innerHTML = content;
      this.popup.setPosition(coord);

      var closer = document.getElementById('popup-closer');

      closer.onclick = () => {
        this.popup.setPosition(undefined);
        closer.blur();
        return false;
      };
    }
  });

    this.map.on('pointermove', (e) => {
    if (e.dragging) {
      return;
    };
    var pixel = this.map.getEventPixel(e.originalEvent);
    var hit = this.map.hasFeatureAtPixel(pixel);

    this.map.getViewport().style.cursor = hit ? 'pointer' : '';
    });

  }

}

错误类型错误：无法将属性“innerHTML”设置为null

此错误表示您试图设置innerHTML的元素不存在

---

弹出覆盖已定义，但从未添加到地图中

我在app.component.html文件中创建了以下div：您想知道吗？是的。您可以执行console.logcontent\u元素并检查它是否返回div元素吗？我已经将console.logcontent\u元素行放在content\u元素=document.getElementById'popup-content'之前；然后返回null如果你把它放在后面，输出是什么？content_element=document.getElementById'popup-content'；console.logcontent_元素；content\u element.innerHTML=内容；什么都没有！