Question

边缘滚动

让我们说我创建了一个简单的地图，其中包含默认选项，可拖动标记和可拖动的形状（我已经用圆形，矩形，多边形和折线测试了它）。当我将标记或形状拖动到地图画布的边缘时，地图开始滚动，这很好。

JSFiddle demo

问题

当我将map的可拖动属性设置为false时，边缘滚动不再适用于标记，但所有形状都忽略它并且地图仍然滚动 - 这是意外的行为。

var mapOptions = {
    ...
    draggable: false
};

JSFiddle demo

版本（3.16）和实验（3.17）版本都存在问题。我已在google's bugtracker上报告了这一点，但可能需要数年时间才能解决问题。那么，有没有人知道解决方法？

编辑：为简单起见，我们假设缩放地图也被禁用

Answer 1

您需要收听地图zoom_changed，bounds_changed和圈子dragend事件。

如果将形状拖动到定义的边界之外，请将其设置回最后位置，并将地图中心设置为原始值。

function initialize() {

    var bounds = null;
    var zoomLevel = 15;
    var center = new google.maps.LatLng(20.291, 153.027);

    var mapOptions = {
        zoom: zoomLevel,
        center: center,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        draggable: false
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        map: map,
        position: center,
        draggable: true
    });

    var circlePos = new google.maps.LatLng(20.281, 153.037);

    var circle = new google.maps.Circle({
        map: map,
        center: circlePos,
        radius: 100,
        strokeWeight: 1,
        fillColor: '#000000',
        fillOpacity: 1,
        draggable: true
    });

    google.maps.event.addListener(map, 'zoom_changed', function () {

        // If user changes zoome level, get the new level and the new map bounds
        zoomLevel = map.getZoom();
        bounds = map.getBounds();
    });

    google.maps.event.addListener(map, 'bounds_changed', function () {

        // Get the initial map bounds if not set yet
        if (!bounds) {

            bounds = map.getBounds();
        }
    });

    google.maps.event.addListener(circle, 'dragend', function () {

        var position = circle.getCenter();

        if (bounds.contains(position)) {

            // Update the circle position
            circlePos = position;

        } else {

            // Set the circle back to its last position
            // Reset the map center as it might have changed
            circle.setCenter(circlePos);
            map.setCenter(center);
        }
    });
};

JSFiddle demo

请注意，如果禁用地图上的缩放选项，则可以取消zoom_changed事件侦听器。如果用户可以使用缩放的问题是，如果用户放大，您的形状仍然可以从地图边界消失，这可能会令人困惑。

Answer 2

版本3.19中的Google fixed it，它现在可以正常运行。

形状不尊重地图的可拖动性＆＃39;属性

2 个答案: