Jvectormap Scrollable onClick 이벤트 만들기

Question

페이지 중앙에 jvectormap이있는 웹 페이지가 있습니다. 대부분의 시간을 스크롤하면 페이지 대신지도 내부를 스크롤 할 수 있으므로 필요한대로 만들 수 있습니다. 그 안을 스크롤 할 수 있도록지도를 클릭하고, vectormap에서 마우스를 움직이면지도 안의 스크롤을 사용할 수 없게됩니다.

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을 사용하지 않기로 결정했는데 대신 클릭하여 쉽게 스크롤하도록 설정할 수있는 Google지도를 사용했습니다.

여기에 내가 한 일례가 있습니다.

 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 

     });