带有 Angular 6 的 Mapbox。“找不到地图容器”错误
Posted
技术标签:
【中文标题】带有 Angular 6 的 Mapbox。“找不到地图容器”错误【英文标题】：Mapbox with Angular 6. "map container not found" error 【发布时间】：2019-02-01 00:27:46 【问题描述】：我正在开发我的第一个 Angular Web 应用程序，我想介绍一些类似于 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> 移至组件；但抛出错误“找不到地图容器”。
我也尝试安装一些 nom 软件包，例如 this one，但它没有足够的信息来说明如何为像我这样的新手使用它。
This another one 也没有文档...
我查看了几个 SO 帖子，但没有发现如何做到这一点。
谢谢。非常感谢您的帮助
【问题讨论】：
【参考方案1】：我遇到了这个问题，所以我只是在方法中添加了setTimeOut：
Oninit()
setTimeout(() =>
let mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/id/tiles/z/x/y?access_token=<key>',
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
).addTo(mymap);
, 100);
【讨论】：
我更喜欢这种方法【参考方案2】：我遇到了同样的问题，并通过使用 @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'
);
【讨论】：
以上是关于带有 Angular 6 的 Mapbox。“找不到地图容器”错误的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Angular 8 项目中导入 Mapbox GL Draw