Mapbox с Angular 6. Ошибка «контейнер контейнера не найден» - PullRequest
Новая
       48

Mapbox с Angular 6. Ошибка «контейнер контейнера не найден»

0 голосов
/ 26 августа 2018

Я занимаюсь разработкой своего первого углового веб-приложения и хочу представить что-то похожее на карты Google.Я не хочу использовать этот последний из-за новой политики выставления счетов, поэтому я попробовал MapBox.

Следуя уроку, мне удалось создать нужную карту;проблема в том, что я не знаю, как отобразить его на угловом компоненте.

Я сгенерировал этот файл для карты, и он отлично работает с браузером и когда я вставляю его непосредственно в index.htmlмой угловой проект.Но когда я пытаюсь использовать его в компоненте, я не знаю, как это сделать. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Points on a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
      <div id='map'></div>
      <script>
        mapboxgl.accessToken = 'myToken'; // replace this with your access token
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'my style URL', // replace this with your style URL
        center: [-2.8662684, 43.2806562],
        zoom: 15
});
// code from the next step will go here

        map.on('click', function(e) {
          var features = map.queryRenderedFeatures(e.point, {
          layers: ['rhynux'] // replace this with the name of the layer
      });

        if (!features.length) {
          return;
         }

      var feature = features[0];

      var popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(feature.geometry.coordinates)
.setHTML('<h3>' + feature.properties.title +      '</h3><p>' + feature.properties.description +     '</p>')
.setLngLat(feature.geometry.coordinates)
        .addTo(map);
    });


    </script>
  </body>
</html>

Я переместил <div id="map"></div> в компонент;но выдается сообщение об ошибке "контейнер контейнера не найден".

Я также пытался установить несколько именных пакетов, таких как этот , но у него недостаточно информации о том, как использовать его для таких новичков, как я.

Этот другой также не имеет документации ...

И я просмотрел несколько SO сообщений, но не нашел понимания, как это сделать.

Спасибо.Ваша помощь очень ценится

1 Ответ

0 голосов
/ 04 октября 2018

У меня была та же проблема, и я решил ее, используя @ViewChild, чтобы найти элемент карты. Вот простой компонент Angular, который покажет карту Mapbox. 

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

@Component({
  selector: 'app-map',
  template: '<div #mapElement style="height:200px"></div>'
})
export class MapComponent implements OnInit {

    map: mapboxgl.Map;
    @ViewChild('mapElement') mapElement: ElementRef;
    constructor() { }

    ngOnInit() {
        mapboxgl.accessToken = 'ACCESS_TOKEN_HERE';
    }

    ngAfterViewInit(){
        this.map = new mapboxgl.Map({
            container: this.mapElement.nativeElement,
            style: 'mapbox://styles/mapbox/streets-v9'
        });
    }   

}
...