真的不知道如何解决这个问题,所以非常感谢任何帮助。
在 Chrome 开发者工具中,图例完美显示在桌面、平板电脑和移动设备的 Mapbox 地图之上。这是看起来的样子。它显示半透明的水平图例。
如果我真的使用我的 iPhone,图例显示不正确。它变成垂直的,所有格式似乎都丢失了。
这是我的地图框控件:
// Control implemented as ES6 class
class fs_legend_control {
onAdd(map) {
var fs_legend_control_html = ' \
<div class="my-legend"> \
<div class="legend-title">Piste Difficulty Legend</div> \
<div class="legend-scale"> \
<ul class="legend-labels"> \
<li><span style="background:#339933;"></span>Novice</li> \
<li><span style="background:#097CCB;"></span>Easy</li> \
<li><span style="background:#ED151F;"></span>Intermed\'</li> \
<li><span style="background:#000000;"></span>Advanced</li> \
<li><span style="background:#ffa502;"></span>Expert</li> \
<li><span style="background:#ffff01;"></span>Freeride</li> \
<li><span style="background:#ffc0cb;"></span>Unrated</li> \
</ul> \
</div> \
<div class="legend-source"> <a href="https://www.example.com/pistes/">About Piste Difficulty</a></div> \
</div> \
';
this._map = map;
this._container = document.createElement('div');
this._container.className = 'fs-legend-control';
this._container.innerHTML = fs_legend_control_html;
return this._container;
}
onRemove() {
this._container.parentNode.removeChild(this._container);
this._map = undefined;
}
}
map.addControl(new fs_legend_control(), "top-left");
这不起作用的任何原因?谢谢你。
哇,就这么简单[这个]。虽然 Chrome 开发者工具中的移动版本显示正确,但它在我的移动设备上显示不正确。我删除了手机上的 Chrome 并重新安装它,它起作用了。这也是提供的链接中使用的解决方案。但不知道为什么。