jVectorMap renders too small

问题

My jVectorMap isn't taking the new height I'm providing on the containing div and only renders at the default (?) height of 54px.

This is in a document.ready function in my scripts.js file:

$('#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);
  })
});

Containing div:

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

Documentation suggests that if I have a width and height set on the containing div, that should be applied to the created jVectorMap. The div is not hidden at any point (which I read here: Jvectormap very small on div change could be an issue) and $('#team-map-usa') clientHeight and clientWidth are both defined when the vectormap is initialized.

This is my first time using jVectorMap and I must be missing something. Any suggestions of how to make the map appear the right size?

回答1:

If your not including the jquery-jvectormap-2.0.1.css on your page you need to style the content generated by jVectorMap.

In your case adding the following to you styles should do the trick

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

You can look at the http://jvectormap.com/css/jquery-jvectormap-2.0.1.css to hopefully find all the styles you need.

回答2:

You have to include jquery-jvectormap-2.0.4.css on page to solve this issue. Just check if you have misspelled file name or you may have missed to add this on page.

回答3:

When you trigger vectorMap() on element that has parent value to display: none it will render as extra small. So solutions is to use visibility: hidden rather that display: none

You can run this code and check if map resize to normal state:

window.dispatchEvent(new Event('resize'));

回答4:

This is not the answer, but may be helpful:

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

In the example that I'm handling, I have two maps with the id="mapa" and id="mapa_dos". The containers of the div are the html and body tags, so displays the maps in the entire screen.

来源：https://stackoverflow.com/questions/26903678/jvectormap-renders-too-small

标签

javascript

jquery

html

css

jvectormap