使 Jvectormap 可滚动 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，而是使用 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

        });

使 Jvectormap 可滚动 onClick 事件

Make Jvectormap Scrollable onClick event

javascript

jquery

jvectormap