Question

我正在使用django 1.10.5，booststrap 4.0和LeafletJs 1.0.3以及路由机插件和地理编码器。现在我有以下问题，当第一次加载页面时，当地图大于640 x 640px时，路由机的控制面板的折叠按钮没有加载（它没有显示在html代码中）。在将页面大小设置为css到640x640px或更小的页面完全加载后，使用chrome dev工具使地图更大时没有问题。

我有一个版本的应用方式，但这没有django和bootstrap，我需要它同时使用它们。

css代码

.map-add-size{
  position: relative;
  width: 500px;
  height:500px;
}

html的

{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block css %}
  <link href="{% static 'routes/css/add.css' %}" rel="stylesheet">
  {{block.super}}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
    <link href="{% static 'routes/css/leaflet-routing-machine.css' %}" rel="stylesheet" >
    <link href="{% static 'routes/css/Control.Geocoder.css' %}" rel="stylesheet">

{% endblock %}

{% block content %}

    <h3>Add a new route</h3>
      <div class="row">
        <div class="route-edit">
          <div class="col-xs-6">
            <p>Route page information</p>
            <form id="mainForm" method="post" class="form">
              {% csrf_token %}
              {{ routeAddForm|crispy }}
                <div class="row route-edit">
                  <button type="submit" name="save_route" class="btn btn-primary">Save and continue</button>
                </div>
            </form>
        </div>
      </div>
    </div>
    <div class ="row">
      <div class="cols-xs-8 map-container-div">
        <p>Add start and end markers by left clicking on the map. <br>
          Add markers by clicking on the lines inbetween the start and end markers<br>
          Remove markers by clicking on the cross next to the address of the marker.
        </p>
      </div>
    </div>
    <div id="map-add" class="map-add-size"></div>
{% endblock %}

{%block javascript %}
{{block.super}}
<script src="{% static 'routes/js/cookie.js' %}"></script>
<script>
var csrftoken = Cookies.get('csrftoken');
</script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="{% static 'routes/js/leaflet-routing-machine.js' %}"></script>
<script src="{% static 'routes/js/Control.Geocoder.js' %}"></script>
<script src="{% static 'routes/js/map-add.js' %}"></script>
{%endblock%}

的javascript

window.lrmConfig = {
//    serviceUrl: 'https://api.mapbox.com/directions/v5',
//    profile: 'mapbox/driving',
};

var map = L.map('map-add').setView([51.505, -0.09], 3);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}{r}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);


var geocoder = L.Control.Geocoder.mapzen('search-DopSHJw'),
    control2 = L.Control.geocoder({
    geocoder: geocoder,
    defaultMarkGeocode: false
  }).on('markgeocode', function(e){
    var bbox = e.geocode.bbox;
            var poly = L.polygon([
                 bbox.getSouthEast(),
                 bbox.getNorthEast(),
                 bbox.getNorthWest(),
                 bbox.getSouthWest()
            ]).addTo(map);
            map.fitBounds(poly.getBounds());
  }).addTo(map);

control = L.Routing.control(L.extend(window.lrmConfig, {
    geocoder: L.Control.Geocoder.nominatim(),
    routeWhileDragging: true,
    reverseWaypoints: true,
    showAlternatives: true,
    altLineOptions: {
        styles: [
            {color: 'black', opacity: 0.15, weight: 9},
            {color: 'white', opacity: 0.8, weight: 6},
            {color: 'blue', opacity: 0.5, weight: 2}
        ]
    },
})).addTo(map);


L.Routing.errorControl(control).addTo(map);

function createButton(label, container) {
    var btn = L.DomUtil.create('button', '', container);
    btn.setAttribute('type', 'button');
    btn.innerHTML = label;
    return btn;
}

map.on('click', function(e) {
    var container = L.DomUtil.create('div'),
        startBtn = createButton('Start from this location', container),
        destBtn = createButton('Go to this location', container);

    var removeContainer = L.DomUtil.create('div'),
    removeBtn = createButton('Remove waypoint',removeContainer);

    L.popup()
        .setContent(container)
        .setLatLng(e.latlng)
        .openOn(map);

            L.DomEvent.on(startBtn, 'click', function() {
      control.spliceWaypoints(0, 1, e.latlng);
      map.closePopup();
    });

        L.DomEvent.on(destBtn, 'click', function() {
        control.spliceWaypoints(control.getWaypoints().length - 1, 1, e.latlng);
        map.closePopup();
    });

});

// Submit post on submit
$('#mainForm').on('submit', function(event){
    event.preventDefault();
    console.log("form submitted!");  // sanity check
    postData();
});

var successText;
function postData(){
  console.log("postData is working!");// sanity check
  var formData = $("#mainForm").serializeArray();

  var routeArray =Array(),
  routeArray =  control.getWaypoints();

  var json_obj = JSON.stringify(routeArray);

  formData.push({name:'json_data',value:json_obj});
  console.log("form data that is send")
  console.log(formData);
  $.post({
         type: 'POST',
         url: '/routes/add/',
         data: formData,
     });
}

Answer 1

我找到了一种方法，使其适用于大于640px的尺寸。我不确定这是否是解决问题的正确方法，但它现在有效。

在leaflet-routing-machine.js中的

在这一行中将640更改为1200，现在该按钮适用于大于640px的地图。

collapsible = collapsible || (collapsible === undefined && map.getSize().x <= 1200);

Leafletjs路由机按钮折叠按钮未加载

1 个答案: