從Highmaps中刪除放大/縮小

Question

我正在使用Highmaps在我的網頁上繪制地圖。 我想禁用任何類型的縮放，例如：

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

我試過這個：

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

和這個：

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

但沒有運氣。

Answer 1

試試這個演示

 $.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 demo： http ： //jsfiddle.net/geogeorge/ssh63xhb/