带有Angular 6的Mapbox。“找不到地图容器”错误

Question

带有Angular 6的Mapbox。“找不到地图容器”错误

Fra*_*anP 5 mapbox-gl mapbox-gl-js angular

我正在开发我的第一个角度网络应用程序，我想介绍一些类似于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>

Run Code Online (Sandbox Code Playgroud)

我移至<div id="map"></div>组件；但是会引发错误“找不到地图容器”。

我还尝试安装一些像这样的 nom软件包，但是它没有足够的信息说明如何将其用于像我这样的新手。

这另一个人也没有文档...

我查看了几篇SO帖子，但对如何执行此操作没有任何了解。

谢谢。非常感谢您的帮助

Answer 1

小智 6

我遇到了同样的问题，并通过使用@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'
        });
    }   

}

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 5

我遇到了这个问题，所以我只是添加了一个setTimeOut在方法中添加了一个：

\n

Oninit(){\n  setTimeout(() => {\n    \n  let mymap = L.map(\'mapid\').setView([51.505, -0.09], 13);\n  L.tileLayer(\'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<key>\', {\n    attribution: \'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery \xc2\xa9 <a href="https://www.mapbox.com/">Mapbox</a>\',\n    maxZoom: 18,\n    id: \'mapbox/streets-v11\',\n    tileSize: 512,\n    zoomOffset: -1,\n    accessToken: \'your.mapbox.access.token\'\n  }).addTo(mymap);\n  }, 100);\n}\n

Run Code Online (Sandbox Code Playgroud)\n

归档时间：	8 年，1 月前
查看次数：	1759 次
最近记录：	7 年，11 月前