2016-04-13 34 views
1

ハイマップを使用して自分のウェブページ上の地図をプロットしています。私はどのような種類のズームを無効にしたいのですか?例:ハイマップからズームイン/アウトを取り除く

  1. ズームアウトボタンを押してズームします。
  2. スクロールスルー。
  3. ピンチズーム。
  4. タッチデバイス。
  5. にズームインする複数のクリック

私はこれ試してみました:。

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

と、この:

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

が、運を。

+3

(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デモ:私はあなた `mapNavigation`オプションがデモに追加http://jsfiddle.net/geogeorge/ssh63xhb/

関連する問題