编辑：恢复交互性

Question

大家早上好，我有一个关于MapBox中一些背景图片的快速问题。对于那些不了解MapBox的人来说，它是一个自定义地图的在线提供商，可以快速创建漂亮的交互式地图和数据可视化。我创建了一个地图项目，并希望将该地图作为背景图像。我有一个嵌入选项，到目前为止这是我的代码：

<!DOCTYPE html> 
<html>
<head></head> 
<body>
    <iframe width='100%' height='800px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
</body>
</html>

但是，我希望Mapbox html占用整个背景。我已经尝试将提供的url放在背景图像中：url（）在css中，但它不起作用。

body {
  background-image: url("https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA");
}

有谁知道我怎么做这个？

谢谢，埃里克

Answer 1

Jon来自Stack - 我实际上在这里完成了大部分地理位置。

如果你想以正确的方式做到这一点，你必须将它嵌入div中，并将你想要的内容放在它自己的容器div中。您可以在API docs on Mapbox中看到您想要的非常直接的实现。您可以使用JavaScript API调整地图的设置（隐藏控件，设置中心等）。

＆＃13;

L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');

＆＃13;

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#map-background,
#map-container,
#map-overlay,
#content {
  width: 100%;
  min-height: 100%;
  position: absolute;
}
#map-background {
  z-index: -1;
}
#map-container {
  z-index: 0;
}
#map-overlay {
  z-index: 1;
  background: none;
}
#content {
  z-index: 0;
}

＆＃13;

<html>

<head>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>

<body>
  <div id="map-background">
    <div id="map-container">
    </div>
    <div id="map-overlay">
    </div>
  </div>
  <div id="content">
    <!-- This is where your regular content should be -->
    <p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
  </div>
</body>

</html>

＆＃13;

祝你好运Eric：）

编辑：恢复交互性

我已经更改了代码以摆脱叠加层和一些阻止样式。试试吧。

＆＃13;

L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');

＆＃13;

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#map-container {
  width: 100%;
  min-height: 100%;
  position: absolute;
}
#content {
  position: absolute;
}

＆＃13;

<html>

<head>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>

<body>
  <div id="map-container">
  </div>
  <div id="content">
    <!-- This is where your regular content should be -->
    <p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
  </div>
</body>

</html>

＆＃13;

Answer 2

模仿背景图像＆＃34;使用mapbox可以执行以下操作：

<!DOCTYPE html> 
<html>
<head>
    #map_bg {
        position:relative;
        width:100%;
        height:800px;
    }
    #map_bg iframe {
        position:absolute;
        top:0px;
        left:0px;
        height:100%;
        width:100%;
    }

    .content {
        z-index:1;
        position:relative;
    }

</head> 
<body>
    <div id="map_bg">
        <iframe class="mapbox" frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
         <div class="content">
             This is other content on the page.
         </div>
    </div>
</body>
</html>

您可以将地图绝对地放在相对于它的父级的位置，该父级允许内容与其重叠（很像背景图像）。通过向其他内容添加z-index:1，您可以确保它显示在地图的顶部;

Answer 3

我不认为只是放置链接作为背景图像将起作用。 Mapbox可能正在画布中渲染地图。

我刚发现this。试试这个。我对mapbox不太熟悉

MapBox背景图片

3 个答案:

编辑：恢复交互性