Question

我是一名设计师，是mapbox的新手。（所以，我可能需要向我解释的事情，比如说我已经四岁了，非常高兴。）

我使用普通编辑器（不是Studio）创建了带标签的地图，并将其放在我的页面here上。

我想添加一个自定义图例，可能是在自定义位置。我尝试使用他们的例子，但我的地图甚至都没有显示出来。当我在头部注释掉mapbox的CSS链接引用时，它几乎可以工作，但显示所有古怪。 See that one here

以下是我在页面上每个mapbox的图例示例中添加的HEAD代码：

<script src="https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js"></script>
<style>

    body { 
    margin:0; 
    padding:0; 
    }
    #map { 
    position:absolute; 
    top:0; 
    bottom:0; 
    width:100%; 
    }
    .legend label,
    .legend span {
    display:block;
    float:left;
    height:15px;
    width:20%;
    text-align:center;
    font-size:9px;
    color:#808080;
    }

</style>

然后这是我为mapbox元素添加的BODY代码。

<div id="legend" style="display:none;">
    <strong>The Title or Explanation of your Map</strong>
    <nav class="legend clearfix">
        <span style="background:#F1EEF6;"></span>
        <span style="background:#BDC9E1;"></span>
        <span style="background:#74A9CF;"></span>
        <span style="background:#2B8CBE;"></span>
        <span style="background:#045A8D;"></span>
        <label>0 - 20%</label>
        <label>40%</label>
        <label>60%</label>
        <label>80%</label>
        <label>100%</label>
        <small>Source: <a href="#">Name of source</a></small>
    </nav>
</div>
<div id="map"></div>

    <script>
    L.mapbox.accessToken = 'pk.eyJ1IjoibW1hcm1vbCIsImEiOiIzZTkxMDM4ZDI5MDZiMDY2MzFlOGQ4YzZiYmY2NmMzOSJ9.Cr8JtBNsYIl3LTxYZkaFPA';
      var map = L.mapbox.map('map', 'mmarmol.2a3461fc');
      map.legendControl.addLegend(document.getElementById('legend').innerHTML);
    </script>

我的页面的其余部分都是Bootstrap。好像我有一个CSS问题，还是一个js问题？有什么想法吗？

谢谢！

在地图集上添加自定义图例 - 显示古怪

0 个答案: