使Jvectormap Scrollable onClick事件

Question

我有一個網頁，在頁面中心有一個jvectormap，而滾動大部分時間滾動內地圖而不是頁面，我想使它，以便您需要點擊地圖可以在地圖內滾動，而且，當您將鼠標移出矢量地圖時，地圖內的滾動將被禁用。

閱讀關於jvectormap的文檔我發現你可以在初始化後更改zoomOnScroll變量的初始值，但是我還沒有找到清楚的例子來說明如何去做。另外，當我在地圖上爲moustout創建事件監聽器時，它與onRegionOut事件重疊，這意味着當用戶將國家/地區的鼠標移動到國家/地區時，將無法滾動地圖。

這是我的代碼到目前爲止。

if (document.getElementById('vector-map-world')) { 
      var world_markers = [ 
      {'latLng': [-32.9521399, -60.7681972], 'name': 'Locación Rosario'}, 
      {'latLng': [-34.6131708, -58.3810633], 'name': 'Locación Buenos Aires'}, 
      ]; 

     var mapObject = $('#vector-map-world').vectorMap('get', 'mapObject'); 
     mapObject.setFocusLatLng = function(scale, lat, lng){ 
      var point, 
      proj = jvm.WorldMap.maps[this.params.map].projection, 
      centralMeridian = proj.centralMeridian, 
      width = this.width - this.baseTransX * 2 * this.baseScale, 
      height = this.height - this.baseTransY * 2 * this.baseScale, 
      inset, 
      bbox, 
      scaleFactor = this.scale/this.baseScale, 
      centerX, 
      centerY; 

      if (lng < (-180 + centralMeridian)) { 
       lng += 360; 
      } 

      point = jvm.Proj[proj.type](lat, lng, centralMeridian); 

      inset = this.getInsetForPoint(point.x, point.y); 
      if (inset) { 
       bbox = inset.bbox; 

       centerX = (point.x - bbox[0].x)/(bbox[1].x - bbox[0].x); 
       centerY = (point.y - bbox[0].y)/(bbox[1].y - bbox[0].y); 

       this.setFocus(scale, centerX, centerY); 
      } 
     } 
     mapObject.removeAllMarkers(); 
     mapObject.addMarkers(world_markers); 
     mapObject.setFocusLatLng(4,-32.9521399, -60.7681972) 
     $('#vector-map-world').on("click", function() { 
      console.log("you can scroll now"); 
     }); 
     $('#vector-map-world').on("mouseout", function() { 
      console.log("you can't scroll now"); 
     }); 
     } 

Answer 1

最後我決定不使用jvectormap，而是使用谷歌地圖，它可以設置爲輕鬆點擊滾動。

這是我做的一個例子。

 var mapObj = new GMaps({ 
      div: '#map-markers', 
      scrollwheel: false // Initialize on false so that it requieres a click to be able to scroll 
     }); 

     mapObj.addListener('click', function(event){ 
      this.setOptions({scrollwheel:true}); // allow to scroll con click 
     }); 
     mapObj.addListener('mouseout', function(event){ 
      this.setOptions({scrollwheel:false}); // disable scroll when the mouse leaves the map box 

     });