Как добавить более одной карты Django-листовки в виде? - PullRequest
Новая
       23

Как добавить более одной карты Django-листовки в виде?

0 голосов
/ 20 ноября 2018

Мне удалось показать карту на одной странице, используя django-листовку.На другой странице я пытаюсь показать две (или более) карты на странице, но не могу понять, как.

Для отображения карты на одной странице: 

<div class="card">
   {% leaflet_map "main" callback="map_init" %}
</div>

<script type="text/javascript">
function map_init(map, options) {
    // get point lat and lon
    var lon = "{{ project.longitude }}";
    var lat = "{{ project.latitude }}";
    // zoom to point & add it to map
    map.setView([lat, lon], 12);
    L.marker([lat, lon]).addTo(map);

}</script>

вышеработает нормально, пока нужно показать одну карту.Однако я не уверен, как можно изменить выше для поддержки нескольких карт.

Я открыл страницу jsfiddle здесь (что-то пустое), не уверен, будет ли она полезна.

Я пытаюсь заполнить div 'img-top' в html ниже: 

var locations = [
	{"lat":27.988098,"lng":86.924925},
	{"lat":27.679535,"lng":83.507020}
]
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="card-columns m-5">
  <div class="card">
    <div class="card-header">Location A </div>
    <div class="img-top" id="map-1" style="height:200px"></div>
    <div class="card-body">
    Some information of A
    </div>
  </div>
  
   <div class="card">
    <div class="card-header">Location B </div>
    <div class="img-top" id="map-2" style="height:200px"></div>
    <div class="card-body">
    Some information of B
    </div>
  </div>
  
</div>

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Так я смог динамически отобразить две (или более) карты в div. 

<script type="text/javascript">

items_json.forEach(item => {
    let map = L.map(item.id + "-map").setView([item.fields.latitude, item.fields.longitude], 10);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
});

</script>

В HTML это <div class="img-top" id="{{id}}-map" style="height:200px"></div> заполняется картой.

Вот JS Fiddle: https://jsfiddle.net/droidxn/w7d5nqps/10/

0 голосов
/ 20 ноября 2018

Не очень сухо, но работает ли нижеследующее? 

<div class="card">
  {% leaflet_map "map_1" callback="map_init_1" %}
</div>
<div class="card">
  {% leaflet_map "map_2" callback="map_init_2" %}
</div>

<script type="text/javascript">
  function map_init(map, lat, lon) {
    // zoom to point & add it to map
    map.setView([lat, lon], 12);
    L.marker([lat, lon]).addTo(map);
  }

  function map_init_1(map) {
    map_init(map, "{{ project1.latitude }}", "{{ project1.longitude }}")
  }

  function map2_init_2(map) {
    map_init(map, "{{ project2.latitude }}", "{{ project2.longitude }}")
  }
</script>

Мне кажется, что в django-листовке рассматриваются самые простые случаи.Возможно, вам придется написать свою логику в javascript, используя брошюру напрямую, чтобы добиться того, что вы пытаетесь сделать.

Вы можете увидеть, что делает django-leaflet, когда звоните {% leaflet_map ... %}:

https://github.com/makinacorpus/django-leaflet/blob/master/leaflet/templates/leaflet/_leaflet_map.html

Обновлено JS Fiddle: https://jsfiddle.net/cdfrn53L/

РЕДАКТИРОВАТЬ:

С для петель в шаблоне Django: 

{% for location in locations %}
<div class="card">
  {% leaflet_map location.div_id callback=location.callback %}
</div>
{% endfor %}

<script type="text/javascript">
  function map_init(map, lat, lon) {
    // zoom to point & add it to map
    map.setView([lat, lon], 12);
    L.marker([lat, lon]).addTo(map);
  }

  {% for location in locations %}
  function {{ location.callback }}(map) {
    map_init(map, "{{ location.lat }}", "{{ location.lon }}")
  }
  {% endfor %}
</script>

При условии, что ваше представление создает список местоположений: 

locations = [
    {'lat': 27.988098, 'lng': 86.924925, 'div_id': 'map-1', 'callback': 'callback_1'},
    {'lat': 27.679535, 'lng': 83.507020, 'div_id': 'map-2', 'callback': 'callback_1'}
]

Вы можете построить значения div_id и callback на основе индекса списка местоположений.

...