jVectorNhập bản đồ (thế giới) kích thước bản đồ

Question

Tôi đang sử dụng jVectorMap từ http://jvectormap.owl-hollow.net/ và mọi thứ hoạt động tốt. Nhưng kích thước chuẩn của bản đồ thế giới là rất nhỏ. Nếu ai đó muốn nhấn ví dụ Bosnia và Herzegovina, anh ta cần cặp kính to! Có các nút thu phóng có sẵn nhưng sau đó bạn phải di chuyển bản đồ trong vùng chứa.

Tôi đã cố gắng phóng to phần tử div nhưng có vẻ như bản đồ có kích thước cố định. Để giúp tôi cung cấp bản đồ thế giới lớn hơn:

• có cơ hội thu phóng tiêu chuẩn khác khi người dùng vào trang web bản đồ không?
• tôi có cần bản đồ thế giới lớn hơn không?

Hoặc tôi có thể làm gì khác để cung cấp bản đồ thế giới lớn hơn?

Chúc mừng!

Answer 1

Để biến nó thành bản đồ thế giới lớn hơn, chỉ cần điều chỉnh kích thước của vùng chứa.

Nếu bạn muốn phóng to theo mặc định, các nút zoom đang bị ràng buộc để các bit mã sau đây:

this.container.find('.jvectormap-zoomin').click(function(){ 
    if (map.zoomCurStep < map.zoomMaxStep) { 
     var curTransX = map.transX; 
     var curTransY = map.transY; 
     var curScale = map.scale; 
     map.transX -= (map.width/map.scale - map.width/(map.scale * map.zoomStep))/2; 
     map.transY -= (map.height/map.scale - map.height/(map.scale * map.zoomStep))/2; 
     map.setScale(map.scale * map.zoomStep); 
     map.zoomCurStep++; 
     $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) - sliderDelta); 
    } 
}); 
this.container.find('.jvectormap-zoomout').click(function(){ 
    if (map.zoomCurStep > 1) { 
     var curTransX = map.transX; 
     var curTransY = map.transY; 
     var curScale = map.scale; 
     map.transX += (map.width/(map.scale/map.zoomStep) - map.width/map.scale)/2; 
     map.transY += (map.height/(map.scale/map.zoomStep) - map.height/map.scale)/2; 
     map.setScale(map.scale/map.zoomStep); 
     map.zoomCurStep--; 
     $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) + sliderDelta); 
    } 
}); 

Bạn chỉ có thể sao chép và điều chỉnh mã mà.

Answer 2

Trong tập tin jquery-jvectormap.js là mã:

WorldMap.prototype = { 
    transX: 0, 
    transY: 0, 
    scale: 1, 
    baseTransX: 0, 
    baseTransY: 0, 
    baseScale: 1, 

Tôi chỉ thay đổi quy mô: 3 và điều đó dường như làm việc

Answer 3

bạn chỉ cần thay đổi các giá trị:

$('#world-map').vectorMap({ 
     map: 'chile', 
      focusOn: { 
     x: 0.6, 
     y: -0.2, 
     scale: 2 
    }, 

Answer 4

này đã làm nó cho tôi

var mapParams = { 
      map: 'world_en', 
      backgroundColor: '#FAFBFC', 
      color: '#f2f4f6', 
      borderColor: '#D1D4D7', 
      borderOpacity: 0.7, 
      values: mapData, 
      scaleColors: ["#4671E0", "#5AA6F0"], 
      normalizeFunction: 'polynomial', 
      onLoad: function(event, map) 
      { 
       jQuery('#map-email-opens').vectorMap('zoomIn'); 
      } 
     } 

     $('#map-email-opens').vectorMap(mapParams);