如何从左下角删除 MapBox 徽标？答案

【问题标题】：How to remove MapBox logo from bottom left corner?如何从左下角删除 MapBox 徽标？
【发布时间】：2015-07-30 22:53:31
【问题描述】：

我正在通过 mapbox.js 脚本在我的 html 页面中嵌入一个 MapBox 地图，如下所示：

L.mapbox.accessToken = 'pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxx';
var map = L.mapbox.map('map', 'xxxxx.xxxxxxxx', {
    zoomControl: false
});

这会产生这样的地图： http://s4.postimg.org/58m4aeb8d/mapbox.png

如何去掉左下角的“Mapbox”标志？

【问题讨论】：

标签： javascript mapbox

【解决方案1】：

您只能完全删除不包含 Mapbox（街道、地形、卫星）或 OpenStreetMap 图层的地图上的属性。这是因为这些图层中包含的 OpenStreetMap 和 DigitalGlobe 数据在法律上需要归属。

如果您的地图不包含这些图层，您可以通过将信息控件设置为 false 来移除默认属性：

var map = L.mapbox.map('map', 'examples.map-8ced9urs', {attributionControl: false});

您可以使用 L.control.attribution 构造函数添加自己的属性。

var credits = L.control.attribution().addTo(map);
credits.addAttribution('Credits: Penny Dog Mapping Co.');

但是，您可以移动属性。如果您正在使用需要署名的图层，但想将其移动到页面的不同部分，您可以在页面的其他位置插入此 HTML sn-p，例如页脚：

<a href='https://www.mapbox.com/about/maps/' target='_blank'>Maps &copy; Mapbox &copy; OpenStreetMap</a>

【讨论】：

这只会删除右下角的版权，而不是左下角的徽标。
你是对的。不幸的是，这是设计使然。他们希望您支付更高级别的许可证才能将其删除。

【解决方案2】：

这可能违反 MapBox 服务条款。添加此 css 将删除它...

.mapbox-logo{
    display: none !important;
}

【讨论】：

.mapboxgl-ctrl-logo

【解决方案3】：

这对我有用：

.mapboxgl-ctrl-logo {
    display: none !important;
}

【讨论】：

【解决方案4】：

根据https://www.mapbox.com/plans/。除非您使用标准或高级定价计划，否则根据服务条款需要 MapBox 徽标。

【讨论】：

正确。我不是在提倡违反 ToS - 我只是说有可能这样做:) 我想我更有趣的问题是如何防止他的？

【解决方案5】：

我找到了这个解决方案，它可以保留 mapbox 字标 (=logo) 和文本属性，但不会干扰界面的其余部分。

此解决方案不违反服务条款！

.leaflet-bottom, .leaflet-top {
    z-index: 0 !important; // This is 1000 by default
    position: absolute;
    pointer-events: none;
}

【讨论】：

【解决方案6】：

在 style.css 中粘贴这段代码

.mapbox-logo{ display: none; } .mapboxgl-ctrl-logo { display: none !important; } .mapbox-improve-map { display: none; } .mapboxgl-ctrl-compass { display: none; }

是javascript文件添加这个吗..

const map = new mapboxgl.Map({ container: this.mapContainer, style: 'mapbox://styles/mapbox/dark-v10', center: [this.state.lng, this.state.lat], zoom: this.state.zoom, attributionControl: false });

帮助您隐藏服务条款

【讨论】：

您好 fahad，感谢您的贡献。您能否编辑您的答案以包含您的代码 sn-p 而不是链接到 pastebin？如果你也添加一点解释，那就更好了。感谢并继续使用 stackoverflow！

【解决方案7】：

在为map创建对象时，只需添加attributionControl: false

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    attributionControl: false
});

【讨论】：

【解决方案8】：

如果您使用Mapbox Static Images API，您可以通过将以下参数添加到您的源 URL 来轻松删除 Mapbox 徽标和 OpenStreetMaps 属性：

&attribution=false&logo=false

示例（将 xxx 替换为您自己的访问令牌）：

https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/static/-122.385,37.7175,12,0/300x300?access_token=xxx

请记住，法律仍要求您在网页或文档的其他位置include proper attribution。

【讨论】：

【解决方案9】：

你可以试试这个

@IBOutlet weak var mapView: MGLMapView!{
        didSet{
            mapView.styleURL = URL(string: "mapbox://styles/mapbox/dark-v10")
            mapView.attributionButton.alpha = 0 // to remove info icon on right
            mapView.logoView.isHidden = true // to remove mapBox logo on left
            mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        }
    }

【讨论】：