2016-04-13 64 views
1

我正在使用Highmaps在我的網頁上繪製地圖。我想禁用任何類型的縮放,例如:從Highmaps中刪除放大/縮小

  1. 通過放大縮小按鈕。
  2. 通過滾動。
  3. 捏縮放。
  4. 在觸控設備上。
  5. 多次點擊可放大

我已經試過這樣:

chart:{ 
    pinchType : 'none', 
    zoomType : 'none' 
} 

這:

mapNavigation:{ 
     enableButton:false, 
     enableDoubleClickZoom:false, 
     enableDoubleClickZoomTo:false, 
     enableMouseWheelZoom:false, 
     enableTouchZoom:false 
     }, 

,但沒有運氣。

+3

我加入你的'mapNavigation'選項演示(http://jsfiddle.net/gh/get/jquery /1.7.2/highslide-software/highcharts.com/tree/master/samples/maps/mapnavigation/doubleclickzoomto/),並禁用所有縮放。 – wergeld

回答

0

試試這個演示

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) { 
 

 
    // Initiate the chart 
 
    Highcharts.mapChart('container', { 
 

 
    title: { 
 
     text: 'Zoom in on country by double click' 
 
    }, 
 

 
    mapNavigation: { 
 
     enabled: false, 
 
    }, 
 

 
    colorAxis: { 
 
     min: 1, 
 
     max: 1000, 
 
     type: 'logarithmic' 
 
    }, 
 

 
    series: [{ 
 
     data: data, 
 
     mapData: Highcharts.maps['custom/world'], 
 
     joinBy: ['iso-a2', 'code'], 
 
     name: 'Population density', 
 
     states: { 
 
     hover: { 
 
      color: '#a4edba' 
 
     } 
 
     }, 
 
     tooltip: { 
 
     valueSuffix: '/km²' 
 
     } 
 
    }] 
 
    }); 
 
});
#container { 
 
    height: 500px; 
 
    min-width: 310px; 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
} 
 

 
.loading { 
 
    margin-top: 10em; 
 
    text-align: center; 
 
    color: gray; 
 
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://code.highcharts.com/maps/highmaps.js"></script> 
 
<script src="https://code.highcharts.com/maps/modules/data.js"></script> 
 
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script> 
 
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script> 
 

 

 
<div id="container" style="max-width: 1000px"></div>

的jsfiddle演示:http://jsfiddle.net/geogeorge/ssh63xhb/