jVectorMap слишком мал

Мой jVectorMap не принимает новую высоту, которую я предоставляю для содержащего div, и отображает только высоту по умолчанию (?) 54 пикселя.

Это функция document.ready в моем файле scripts.js:

$('#team-map-usa').vectorMap({
  map: 'us_lcc_en',
  backgroundColor: '#ffffff',
  hoverColor: '#999999',
  color: '#dddddd',
  normalizeFunction: 'polynomial',
  values: myData,
  scaleColors: ['#d0c4dc', '#d1b0eb', '#b296cb', '#47006b'],
  onLabelShow: function(event, label, code) {
    label.text(code);
  })
});

Содержит раздел:

    <section id="top">
      <div id="team-map-usa" style="width: 600px; height: 400px;"></div>
    </section>

Документация предполагает, что если у меня есть ширина и высота, установленные для содержащего div, это следует применить к созданному jVectorMap. Div нигде не скрыт (о чем я читал здесь: Jvectormap очень мал при изменении div может быть проблемой), а $('#team-map-usa') clientHeight и clientWidth определяются при инициализации векторной карты.

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


javascript html jquery css jvectormap
person elemjay19    schedule 13.11.2014    source источник
comment
Вы когда-нибудь решали эту проблему? у меня такая же проблема...   -  person Kevin Beal    schedule 31.01.2015

Ответы (4)


arrow_upward
9
arrow_downward

Если вы не включаете jquery-jvectormap-2.0.1.css на свою страницу, вам необходимо стилизовать содержимое, сгенерированное jVectorMap.

В вашем случае добавление следующих стилей должно помочь

.jvectormap-container {
    height:100%;
    width:100%;
}

Вы можете посмотреть на http://jvectormap.com/css/jquery-jvectormap-2.0.1.css, чтобы найти все нужные стили.

person Viltsu    schedule 02.12.2014
comment
Для меня решение состояло в том, чтобы правильно включить jquery-jvectormap...css на страницу! Я ошибся. Например. Мне не хватало этого в моем ‹head› моего HTML: <link rel="stylesheet" media="all" href="bower_components/jvectormap202/dist/css/jquery-jvectormap-2.0.2.css"></script> я использовал этот вариант Bower< /а>. - person Bart; 15.09.2015

arrow_upward
2
arrow_downward

Вы должны включить jquery-jvectormap-2.0.4.css на страницу, чтобы решить эту проблему. Просто проверьте, не ошиблись ли вы в имени файла или, возможно, вы пропустили, чтобы добавить это на страницу.

person Chetan Patel    schedule 15.09.2015

arrow_upward
2
arrow_downward

Когда вы вызываете vectorMap() для элемента, родительское значение которого равно display: none, он будет отображаться как очень маленький. Таким образом, решение состоит в том, чтобы использовать visibility: hidden, а не display: none.

Вы можете запустить этот код и проверить, изменился ли размер карты до нормального состояния:

window.dispatchEvent(новое событие('изменить размер'));

person user956584    schedule 19.08.2019

arrow_upward
0
arrow_downward

Это не ответ, но может быть полезным:

html, body, #mapa, #mapa_dos{ height: 100%; width: 100%; margin: 0; padding: 0; }

В примере, который я обрабатываю, у меня есть две карты с id="mapa" и id="mapa_dos". Контейнерами div являются теги html и body, поэтому карты отображаются на весь экран.

person eduardo a    schedule 26.11.2014