2016-08-18 165 views
2

我正在創建一個需要全尺寸地圖的網頁,我正在使用JVectorMap。地圖的寬度和高度均爲100%。但是,這會使地圖在完全縮小時延伸到頁面的邊緣,這是不可取的。理想情況下,當完全縮小時,地圖周圍會有一個邊框,但是當放大地圖時仍然會延伸到頁面的邊緣。從本質上講,我想從地圖開始看起來比被允許的更加縮小。JVectorMap設置比例小於1

在這種情況下,不能使用HTML邊框和填充,因爲雖然它們確實在頁面加載時創建了所需的效果,但是在放大地圖時邊框仍然存在。唯一的想法是試圖設置「規模」靠近下列代碼的結尾,以便使其值低於零變量:

<script> 
    $(function(){ 
     $('#map').vectorMap({ 
      map: 'world_mill', 
      focusOn: { 
       x: 0.5, 
       y: 0.5, 
       scale: 0.8 
      } 
     }); 
    }); 
</script> 

這是沒有效果的,作爲用於任何值‘低於1刻度’似乎被忽略。我已經包含了下面的截圖來說明問題。

當前頁(地圖延伸到邊緣) Current Page (Map extends to edge)

理想頁(圖有邊界 Ideal Page (Map has border)

任何幫助,將不勝感激!

回答

2

我要去發佈答案我自己的問題,以防萬一任何人在將來遇到這種情況。似乎setScale只能將縮放設置爲參數zoomMinzoomMax之間的值,因此通過降低zoomMin到0.9我能夠成功使用setScale將縮放比例降低到0.9。

所以我結束了最後的代碼是:

$(function(){ 
    $('#map').vectorMap({ 
     map: 'world_mill', 
     zoomMin: 0.9, 
     focusOn: { 
      x: 0.5, 
      y: 0.5, 
      scale: 0.9 
     }, 
    }); 
});