javascript - Load another jvectormap on region click - Stack Overflow

admin管理员组

文章数量:1353326

I'm trying to load the specific region map onRegionClick. However it seems as though the region is loading after the change is made. Here's my code:

function switchMap(code) {
    $.getScript('maps/'+ code +'.js');
    $('#map').vectorMap({map: code});
}

$('#map').vectorMap({
    map: 'world_mill_en',
    onRegionClick: function(event, code) {
        if (code == "CA") {switchMap(code)}
        if (code == "AF") {switchMap(code)}
        if (code == "AL") {switchMap(code)}
        if (code == "AR") {switchMap(code)}
        if (code == "CH") {switchMap(code)}
    }
});

The console output is this:

Uncaught Error: Attempt to use map which was not loaded: CA world-map.js:82

OPTIONS file:///C:/Users/D-4/Desktop/find-a-bible/maps/CA.js?_=1364318443130  jquery-1.8.2.js:8416

I'm trying to load the specific region map onRegionClick. However it seems as though the region is loading after the change is made. Here's my code:

function switchMap(code) {
    $.getScript('maps/'+ code +'.js');
    $('#map').vectorMap({map: code});
}

$('#map').vectorMap({
    map: 'world_mill_en',
    onRegionClick: function(event, code) {
        if (code == "CA") {switchMap(code)}
        if (code == "AF") {switchMap(code)}
        if (code == "AL") {switchMap(code)}
        if (code == "AR") {switchMap(code)}
        if (code == "CH") {switchMap(code)}
    }
});

The console output is this:

Uncaught Error: Attempt to use map which was not loaded: CA world-map.js:82

OPTIONS file:///C:/Users/D-4/Desktop/find-a-bible/maps/CA.js?_=1364318443130  jquery-1.8.2.js:8416

• javascript
• jquery
• jvectormap

Share Improve this question Follow edited Jul 17, 2014 at 8:18 morkro 4,68555 gold badges2727 silver badges3535 bronze badges asked Mar 26, 2013 at 17:30 nontoxicjonnontoxicjon 15311 gold badge22 silver badges99 bronze badges 1

• Check if you have jquery-jvectormap-us-mill-en.js"> in your page. – You Know Nothing Jon Snow Commented Oct 19, 2013 at 12:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

In order to use the switchMap function, you must initialize the new vectorMap after the file was fully loaded, thus intializing it in a callback. .

function switchMap(code) {
    $.getScript('maps/'+ code +'.js' , function (data){
        $('#map').vectorMap({map: code});
    });
}

you should only put the height or the width of the div to render the map properly. jvectormap will pute the missing dimension automatically to maintain the map aspect ratio. In case you are changing the height dynamically using javascript, make sure you call updateSize on your map object. Note that you can get the map object using this var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject'); then call mapObject.updateSize();

本文标签： javascriptLoad another jvectormap on region clickStack Overflow