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

        });

使Jvectormap可滚动onClick事件

1 个答案: