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.