删除Highmaps的放大/缩小功能

Removing zoom in/out from Highmaps

本文关键字：缩小 功能 放大 Highmaps 删除      更新时间：2024-06-22

我正在使用Highmaps在我的网页上绘制地图。我想禁用任何类型的缩放，例如：

  1. 通过放大和缩小按钮
  2. 通过滚动
  3. 捏可缩放
  4. 触摸式设备
  5. 多次单击可放大

我试过这个：

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

这个：

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

但没有运气。

试试这个演示

$.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/

相关文章：