Mapbox导航控件放大和缩小

Question

我已成功将导航控件添加到我的地图中，但按钮是空白的，没有＆＃39; +＆＃39;或者＆＃39; - ＆＃39;他们中的任何一个。还有其他选择我可以用来放置＆＃39; +＆＃39;或者＆＃39; - ＆＃39;在他们。这是我用来创建导航控件的代码。

this.map = new MapboxGL.Map(mapOptions);

var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');

我见过类似的例子，使用Mapbox Leaflet的zoomInText和zoomInTitle。我可以在Mapbox GL中使用类似的东西吗？

Answer 1

您能否提供任何错误或其他代码，以帮助我们找出究竟是什么问题。

导航控制通常非常简单，如here

所述

当你检查元素时，你会看到一个类吗？

.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in

该课程应该有＆＃34; +＆＃34;。

的背景图片

如果您没有看到它，则不得包含css。

Answer 2

我在Angular2中实现时遇到了类似的问题，但正如lucas-wojciechowski指出的那样，包括mapbox-gl.css将解决这个问题。

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />

Answer 3

在我的情况下，导航控件和向北箭头按钮为空白，而全屏按钮仅部分显示为错误的颜色。问题是旧的CSS文件。通过从1.4.1更改版本号。到1.7.0，一切都已纠正！

<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />