Mapbox导航控件放大和缩小

时间:2016-12-14 23:08:35

标签: mapbox mapbox-gl mapbox-gl-js

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

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

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

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

3 个答案:

答案 0 :(得分:1)

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

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

所述

当你检查元素时,你会看到一个类吗?

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

该课程应该有" +"。

的背景图片

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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