Доброе утро, всем, У меня есть быстрый вопрос о некоторых фоновых изображениях в MapBox. Для тех, кто не знает MapBox, он является онлайн-провайдером пользовательских карт, которые быстро создают красивые интерактивные карты и визуализацию данных. Я создал проект карты и хотел поместить эту карту в качестве фонового изображения. Я дал возможность встраивать и вот мой код до сих пор:MapBox Background Image

<!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>

Однако я хочу HTML MapBox взять весь background.I попытался поместить 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"); 
}

Кто-нибудь знает, как я могу это сделать?

Спасибо, Эрик

источник

2014-11-17 Eric Park

Единственный способ вы могли бы сделать это истинное фоновое изображение, принимая скриншот карты и сохранить его как изображение, где-то, а затем использовать этот образ. Это только действительное решение, если вы не заботитесь о сохранении интерактивной функциональности. –

Эй, Джонатан, спасибо за ответ. Я надеялся сохранить интерактивность MapBox, возможно ли это вообще? Будь то через HTML/CSS или использование Javascript? –

Jon here from Stack - На самом деле я делаю большую часть геоматериалов здесь.

Если вы хотите сделать это правильно, вам нужно будет встроить его в div и поместить содержимое, которое вы хотите, в его собственный контейнер div. Вы можете увидеть довольно простую реализацию того, что вы хотите в API docs on Mapbox. Вы можете настроить параметры карты с помощью JavaScript API (скрыть элементы управления, установить центр и т. Д.).

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

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; 
 
}

<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>

удачи Эрик :)

EDIT: Восстановление интерактивность

Я изменил код, чтобы избавиться от наложения и некоторые блокировки стили. Попробуй это.

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

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

<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>

источник

2014-11-17 20:09:41

О, и если вы хотите сохранить интерактивность карты, вам просто нужно удалить div '# map-overlay', который в настоящее время покрывает карту в приведенном выше фрагменте кода. –

Эй, Джон, спасибо за помощь! Я получил код работает, но, похоже, не может получить интерактивность карты. Я удалил div и стиль, но по-прежнему не могу заставить карту увеличить или уменьшить масштаб. Я опубликую свой сайт Github после его обновления. –

http://erichoonpark.github.io/finalproject/index.html –

Чтобы имитировать «фоновое изображение» эффект с 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 к другому контенту, вы можете убедиться, что он отображается поверх карты;

источник

2014-11-17 18:57:20

Я не думаю, что просто положить ссылку, поскольку фоновое изображение будет работать. Mapbox может отображать карту в холсте.

Я только что нашел this. Попробуй это. Я не очень хорошо знаком с картотекой

источник

2014-11-17 19:30:16

MapBox Background Image

ответ

EDIT: Восстановление интерактивность

Смежные вопросы