Tải một jvectormap khác lên vùng nhấp

Question

Tôi đang cố tải bản đồ khu vực cụ thể onRegionClick. Tuy nhiên có vẻ như khu vực đang tải sau khi thay đổi được thực hiện. Dưới đây là mã của tôi:

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)} 
    } 
}); 

Giao diện điều khiển đầu ra là thế này:

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 

Answer 1

Để sử dụng chức năng switchMap, bạn phải khởi tạo vectorMap mới sau khi các tập tin đã được nạp đầy đủ, do đó intializing nó trong một gọi lại. .

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

Answer 2

bạn chỉ nên đặt chiều cao hoặc chiều rộng của div để hiển thị bản đồ chính xác. jvectormap sẽ tự động tính kích thước còn thiếu để duy trì tỷ lệ khung hình bản đồ. Trong trường hợp bạn đang thay đổi chiều cao tự động bằng javascript, hãy đảm bảo bạn gọi updateSize trên đối tượng bản đồ của mình. Lưu ý rằng bạn có thể lấy đối tượng bản đồ bằng cách sử dụng số var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject'); sau đó gọi mapObject.updateSize();