使 jVectormap 不可拖动

Question

有没有办法锁定地图的视口（不可拖动）？我的页面上有一张地图，但当我用鼠标单击并拖动时，它仍然可以上下滚动...

<div class="map-container">
  <div id="nz-map" style="width: 600px; height: 400px"></div>
</div>

和用于创建地图的 js

/* map parameters */
    var wrld = {
            map: 'nz_mill_en',
            backgroundColor: '#fff',
            regionStyle: {
      initial: {
        fill: '#012051'
      },
      hover: {
          "fill-opacity" : 1
      }},
            onMarkerClick: function(events, index) {
            $(location).attr('href', markers[index].weburl);
            },
            onRegionLabelShow: function(e, el, code){
                e.preventDefault();
            },
            colors:{
        "Northern": '#012051',
                "East Coast": '#012051',
                "Central": '#012051',
                "Upper South Island": '#012051',
                "South Canterbury": '#012051',
                "Otago": '#012051',
                "Southland": '#012051'
            },
            series: {
      regions:
      [{
        attribute: 'fill'
      }]
    },
            zoomButtons: false,
            zoomOnScroll: false,
            focusOn: {
                x: 0.3,
                y: 0.7,
                scale: 3
            },
            markerStyle: {
                initial: {
                    fill: '#F8E23B',
                    stroke: '#383f47'
                }
            },
            markers: markers,
    };

    $('#nz-map').vectorMap(wrld);

Answer 1

您在 false 上设置了 panOnDrag 参数以禁用地图平移

var wrld = {
    map: 'nz_mill_en',
    backgroundColor: '#fff',
    panOnDrag: false, // disable panning of the map
    ...
}

使 jVectormap 不可拖动

Making jVectormap not draggable

javascript

jquery

jvectormap