时间戳

首页 > 解决方案 > Angular 9 MapboxGeocoder 添加标记不起作用

angular - Angular 9 MapboxGeocoder 添加标记不起作用

问题描述

我用 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());
      }
    }

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

标签： angularmapboxmapbox-glgeocoder

解决方案

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

例如：

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());

推荐阅读