Листовка странного размера карты и поведения листов - PullRequest
Новая
       39

Листовка странного размера карты и поведения листов

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

Я интегрирую карту листовки в свой сайт, созданный с помощью метеора, и двигатель шаблонного двигателя горит.

Я испытываю очень странное бегство в отношении размера карты и того, как она выглядит при перетаскивании и масштабировании.

Я инициализирую карту следующим образом: 

var mymap = L.map('leaflet-map').setView([40.712, -74.227], 5);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 15,
  minZoom: 1,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(mymap);

HTML: 

<div id="map-div">
    <div id="map-inner-div">
        <div id="leaflet-map"></div>
    </div>
</div>

CSS: 

#map-div {
  height:300px;
  width:500px;
}

Когда я загружаю веб-страницу, я получаю одну плитку, размер которой не равен размеру ее родительского элемента.

Leaflet map onload

Если я перетаскиваю плитку или зум, она будет повсюду, а другие плитки будут случайным образом появляться.

Leaflet random tiles

Я не получаю никаких сообщений об ошибках.

Моя гипотеза состоит в том, что ширина и высота карты устанавливаются по умолчанию на весь экран, но она лишь время от времени загружает различные плитки.

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

1 Ответ

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

В Meteor вам также необходимо связать CSS-файл Leaflet.

Например, если вы используете пакет компилятора стилей, просто @import CSS-файл Leaflet в одном из ваших стилевых файлов (точный путь может быть как ../node_modules/leaflet/dist/leaflet.css в зависимости от того, где находится ваш файл стилей, или вы можете использовать ссылку {}/node_modules в зависимости от возможностей вашего пакета компилятора).

Другое возможное решение - просто скопироватьCSS-файл Leaflet в вашу папку client, чтобы он автоматически охотно связывал / загружал.

В качестве варианта можно было бы вместо этого создать символическую ссылку.

Наконец, если вы используете значение по умолчаниюЗначок маркера (синий значок) и / или элемент управления слоями по умолчанию (со значком сложенных ромбов) не забудьте включить изображения Leaflet (в папке dist/images) в папку public, чтобы Leaflet JS мог их найти.Опять же, вариант может заключаться в символической ссылке на эту папку.

Вы можете просто скопировать папку images (и ее содержимое) в public, чтобы получить следующую структуру: 

<project-root>/public/images/marker-icon.png

и т. Д.

...