Angular 9 MapboxGeocoder 添加标记不起作用答案

【问题标题】：Angular 9 MapboxGeocoder add marker doesn't workAngular 9 MapboxGeocoder 添加标记不起作用
【发布时间】：2020-04-19 06:29:22
【问题描述】：

我用 angular 9 和 mapbox gl 创建了一个项目。我的地理编码器有问题，搜索地点时一切正常，但我尝试在地理编码器结果之后设置一个点，如下所示：https://docs.mapbox.com/mapbox-gl-js/example/point-from-geocoder-result/ 我也这样做，但标记没有出现。

这是我初始化地图并添加地理编码器的代码：

    import {Component, OnInit} from '@angular/core';
    import {FormBuilder, FormGroup} from '@angular/forms';
    import {UserService} from '../../../user/service/user.service';    
    import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
    import * as mapboxgl from 'mapbox-gl/dist/mapbox-gl';
    import {environment} from '../../../../../environments/environment';


    @Component({
      selector: 'app-add-sport-ad',
      templateUrl: './add-sport-ad.component.html',
      styleUrls: ['./add-sport-ad.component.scss']
    })

    export class AddSportAdComponent implements OnInit {
      form: FormGroup;
      map: mapboxgl.Map;
      style = 'mapbox://styles/mapbox/streets-v11';
      lat = 37.75;
      lng = -122.41;

      constructor(private fb: FormBuilder, public userService: UserService) {
      }

      ngOnInit() {
        this.initForm();
        mapboxgl.accessToken = environment.mapbox.accessToken;

        this.map = new mapboxgl.Map({
          container: 'map',
          style: this.style,
          zoom: 13,
          center: [this.lng, this.lat]
        });

        const geocoder = new MapboxGeocoder({
          accessToken: mapboxgl.accessToken,
          marker: {
            color: 'orange'
          },
          mapboxgl
        });

        this.map.addControl(geocoder);
        this.map.addControl(new mapboxgl.NavigationControl());
      }
    }

如果有人可以帮助我，非常感谢:)

【问题讨论】：

我的“大家好”没有出现，我尝试编辑它但不起作用:(大家好哈哈

标签： angular mapbox mapbox-gl geocoder

【解决方案1】：

我遇到了同样的问题，它没有自动添加标记，所以，为了解决这个问题，我手动添加了标记。

举例：

new Marker().setLngLat([lng, lat]).addTo(this.map);

但您需要保存标记位置，因为当您进行另一次搜索时，您需要删除前一个标记。

我这样做了：
进口

import { Marker } from "mapbox-gl/dist/mapbox-gl.js";

创建一个变量来存储标记

private lasMarker: Marker;

然后如果有旧标记，我将其删除并放置新标记（如果您不删除旧标记，则当您放置另一个标记时，此标记不会自动删除）

if (this.lastMarker) this.lastMarker.remove();
this.lastMarker = new Marker().setLngLat([lng, lat]).addTo(this.getMapBox());

【讨论】：