Question

我有一张带有可拖动标记的地图。当您单击标记时，我会将内容加载到#overflow div中。使用台式机上的鼠标滚轮可以很好地进行滚动，但是在移动设备上使用拖动滚动时会出现问题：

最初，在#overflow中根本没有滚动，直到我添加了if(map.tap) map.tap.disable()滚动才可以工作，但是只有当我的手指在屏幕上时，才没有平滑，残留的滚动让您进行排序轻拂窗户。因此滚动需要很长时间，因为我必须用手指手动拖动内容而不是轻拂它。如何获得像轻弹般的WEEEEEEE滚动以在移动设备上工作并且仍然具有可拖动的标记？

<div id=“overflow” style=“
 position: fixed; 
 left: 0; top: 0; 
 width: 100%; height !00%; 
 overflow: auto;”>
     a lot of content is loaded here when a marker is clicked on
</div>

这是我初始化地图的方式：

var map = L.map('map').setView([40,-70], 8);

token = ‘pk.my-token';

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token='+token, {
    maxZoom: 21,
    id: 'mapbox.light'
}).addTo(map);

data_url = ‘/fetch-addresses';

$.getJSON(data_url, function(data) {

    var addresses = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        layer.id = feature.properties.id;
        layer.on('dragend', function(e) {
            new_lat = e.target._latlng.lat;
            new_lng = e.target._latlng.lng;
            updateAddress("X", new_lat, layer.id);
            updateAddress("Y", new_lng, layer.id);
        });
      },
      pointToLayer: function (feature, latlng) {        
        return L.circleMarker(latlng, getStyles(feature.properties.status) );
      }
    });

    var clusters = new L.markerClusterGroup({ });
    clusters.addLayer(addresses);
    map.addLayer(clusters);

    clusters.on("click", function(evt) {
        map.dragging.disable();
        map.touchZoom.disable();
        map.doubleClickZoom.disable();
        map.scrollWheelZoom.disable();
        map.boxZoom.disable();
        map.keyboard.disable();
        if (map.tap) map.tap.disable();
        $(‘#overflow’).load(‘/load-overflow-content’, function({ });
    });
});

我使用L.Path.Drag.js插件使标记可拖动，并在标记样式中设置draggable：true。

    function getStyles(status) {
         if (status === “SAMPLE") {
            return {
                radius: 11,
                weight: 1,
                opacity: 1,
                color: “blue",
                fillColor: “blue",
                fillOpacity: .25,
                draggable: true
            };
        }
     }

在移动设备上使用传单损害了拖动滚动

0 个答案: