在Django HTML模板中使用导航栏将div中的mapbox div拟合

时间：2019-01-09 04:37:04

标签： javascript html css django

我正在遵循此Mapbox示例（https://www.mapbox.com/help/building-a-store-locator/），并尝试将其适合Django Web应用程序。我相信我的问题出在base.html，因为在Mapbox教程中，它们没有导航栏或使用模板继承。 base.html可能会引起问题，因为它使用了Home.html中的内容。在我的屏幕快照中，您可以看到地图和侧边栏div并未明智地填充content-section div的高度。该地图还仅占据其内部div的一半。我已经尝试了很多次以找出问题所在，但无法解决。

base.html 

{% load static %}
 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <!-- Bootstrap CSS, and other meta html -->
</head>
<body>

<header class="site-header">
  <!-- header for website containing navbar config -->
</header>

<main role="main" class="container">
<div class="row">
  <div class="col-md" align="center">
    {% if messages %}
      {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">
          {{ message }}
        </div>
      {% endfor %}
      {% endif %}
    {% block content %}{% endblock %}
  </div>
 </div>
</main>
 <script  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    

Home.html 

{% extends "geotracker/base.html" %}
{% load static %}
{% block content %}
<body>
<div class="content-section">

  <div class='sidebar'>
 <div class='heading'>
  <h1>Our locations</h1>
 </div>
<div id='listings' class='listings'></div>
</div>
<div id='map' class='map'> </div>
</div>
<script>

  // This will let you use the .remove() function later on
  if (!('remove' in Element.prototype)) {
  Element.prototype.remove = function() {
  if (this.parentNode) {
      this.parentNode.removeChild(this);
   }
  };
 }

mapboxgl.accessToken = 'myTokenHere';

// This adds the map
var map = new mapboxgl.Map({
// container id specified in the HTML
container: 'map',
// style URL
style: 'mapbox://styles/mapbox/light-v9',
// initial position in [long, lat] format
center: [-77.034084142948, 38.909671288923],
// initial zoom
zoom: 13,
scrollZoom: false
});

var stores = {
"type": "FeatureCollection",
"features": [
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -77.043959498405,
        38.903883387232
      ]
    },
    "properties": {
      "phoneFormatted": "(202) 331-3355",
      "phone": "2023313355",
      "address": "1901 L St. NW",
      "city": "Washington DC",
      "country": "United States",
      "crossStreet": "at 19th St",
      "postalCode": "20036",
      "state": "D.C."
    }
  }]
 };
// This adds the data to the map
map.on('load', function (e) {
    // Add the data to your map as a layer
  map.addLayer({
    "id": "locations",
    "type": "symbol",
    // Add a GeoJSON source containing place coordinates and   information.
    "source": {
      "type": "geojson",
      "data": stores
    },
    "layout": {
      "icon-image": "restaurant-15",
      "icon-allow-overlap": true,
    }
  });
    });

// This is where your interactions with the symbol layer used to be
// Now you have interactions with DOM markers instead
stores.features.forEach(function(marker, i) {
// Create an img element for the marker
var el = document.createElement('div');
el.id = "marker-" + i;
el.className = 'marker';
// Add markers to the map at all points
new mapboxgl.Marker(el, {offset: [0, -23]})
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);

el.addEventListener('click', function(e){
    // 1. Fly to the point
    flyToStore(marker);

    // 2. Close all other popups and display popup for clicked store
    createPopUp(marker);

    // 3. Highlight listing in sidebar (and remove highlight for all other listings)
    var activeItem = document.getElementsByClassName('active');

    e.stopPropagation();
    if (activeItem[0]) {
       activeItem[0].classList.remove('active');
    }

    var listing = document.getElementById('listing-' + i);
    listing.classList.add('active');

});
});


function flyToStore(currentFeature) {
map.flyTo({
    center: currentFeature.geometry.coordinates,
    zoom: 15
  });
}

function createPopUp(currentFeature) {
var popUps = document.getElementsByClassName('mapboxgl-popup');
if (popUps[0]) popUps[0].remove();


var popup = new mapboxgl.Popup({closeOnClick: false})
      .setLngLat(currentFeature.geometry.coordinates)
      .setHTML('<h3>Sweetgreen</h3>' +
        '<h4>' + currentFeature.properties.address + '</h4>')
      .addTo(map);
}


function buildLocationList(data) {
for (i = 0; i < data.features.length; i++) {
  var currentFeature = data.features[i];
  var prop = currentFeature.properties;

  var listings = document.getElementById('listings');
  var listing = listings.appendChild(document.createElement('div'));
  listing.className = 'item';
  listing.id = "listing-" + i;

  var link = listing.appendChild(document.createElement('a'));
  link.href = '#';
  link.className = 'title';
  link.dataPosition = i;
  link.innerHTML = prop.address;

  var details = listing.appendChild(document.createElement('div'));
  details.innerHTML = prop.city;
  if (prop.phone) {
    details.innerHTML += ' &middot; ' + prop.phoneFormatted;
  }



  link.addEventListener('click', function(e){
    // Update the currentFeature to the store associated with the clicked link
    var clickedListing = data.features[this.dataPosition];

    // 1. Fly to the point
    flyToStore(clickedListing);

    // 2. Close all other popups and display popup for clicked store
    createPopUp(clickedListing);

    // 3. Highlight listing in sidebar (and remove highlight for all other listings)
    var activeItem = document.getElementsByClassName('active');

    if (activeItem[0]) {
       activeItem[0].classList.remove('active');
    }
    this.parentNode.classList.add('active');

  });
 }
}
</script>

<style>

  body {
    color:#404040;
    -webkit-font-smoothing:antialiased;
  }

  * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }

  .sidebar {
    position:absolute;
    width:33.3333%;
    height:100%;
    top:0;left:0;
    overflow:hidden;
    border-right:1px solid rgba(0,0,0,0.25);
  }
  .pad2 {
    padding:20px;
  }

  .map {
    position:absolute;
    left:33.3333%;
    width:66.6666%;
    top:0;bottom:0;
  }

  h1 {
    font-size:22px;
    margin:0;
    font-weight:400;
    line-height: 20px;
    padding: 20px 2px;
  }

  a {
    color:#404040;
    text-decoration:none;
  }

  a:hover {
    color:#101010;
  }

  .heading {
    background:#fff;
    border-bottom:1px solid #eee;
    min-height:60px;
    line-height:60px;
    padding:0 10px;
    background-color: #00853e;
    color: #fff;
  }

  .listings {
    height:100%;
    overflow:auto;
    padding-bottom:60px;
  }

  .listings .item {
    display:block;
    border-bottom:1px solid #eee;
    padding:10px;
    text-decoration:none;
  }

  .listings .item:last-child { border-bottom:none; }
  .listings .item .title {
    display:block;
    color:#00853e;
    font-weight:700;
  }

  .listings .item .title small { font-weight:400; }
  .listings .item.active .title,
  .listings .item .title:hover { color:#8cc63f; }
  .listings .item.active {
    background-color:#f8f8f8;
  }
  ::-webkit-scrollbar {
    width:3px;
    height:3px;
    border-left:0;
    background:rgba(0,0,0,0.1);
  }
  ::-webkit-scrollbar-track {
    background:none;
  }
  ::-webkit-scrollbar-thumb {
    background:#00853e;
    border-radius:0;
  }

  .marker {
    border: none;
    cursor: pointer;
    height: 56px;
    width: 56px;
    background-image: url(marker.png);
    background-color: rgba(0, 0, 0, 0);
  }

  .clearfix { display:block; }
  .clearfix:after {
    content:'.';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }

  /* Marker tweaks */
  .mapboxgl-popup {
    padding-bottom: 50px;
  }

  .mapboxgl-popup-close-button {
    display:none;
  }
  .mapboxgl-popup-content {
    font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
    padding:0;
    width:180px;
  }
  .mapboxgl-popup-content-wrapper {
    padding:1%;
  }
  .mapboxgl-popup-content h3 {
    background:#91c949;
    color:#fff;
    margin:0;
    display:block;
    padding:10px;
    border-radius:3px 3px 0 0;
    font-weight:700;
    margin-top:-15px;
  }

  .mapboxgl-popup-content h4 {
    margin:0;
    display:block;
    padding: 10px 10px 10px 10px;
    font-weight:400;
  }

  .mapboxgl-popup-content div {
    padding:10px;
  }

  .mapboxgl-container .leaflet-marker-icon {
    cursor:pointer;
  }

  .mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
    margin-top: 15px;
  }

  .mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
    border-bottom-color: #91c949;
  }

  </style>
 </body>
{% endblock %}

content-section div中的侧边栏和Map div Sidebar and Map div inside content-section div

0 个答案:

没有答案
相关问题
最新问题