Question

使用ctrl + scroll缩放地图
在手机/平板电脑上用两根手指移动地图

...谷歌地图的功能如此相似？随着评论......

到目前为止，这是我的设置：

// Leaflet Maps
var contactmap = L.map('contact-map', {
        center: [41.3947688, 2.0787279], 
        zoom: 15,
        scrollWheelZoom: false
    });

Answer 1

使用ctrl + zoom缩放地图。我是以自定义方式做的。 html代码在

之下

<div id="map"></div>

css

.map-scroll:before {
content: 'Use ctrl + scroll to zoom the map';
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
font-size: 34px;
 }
 .map-scroll:after {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
content: '';
background: #00000061;
z-index: 999;
}

的jQuery

  //disable default scroll 
  map.scrollWheelZoom.disable();

  $("#map").bind('mousewheel DOMMouseScroll', function (event) {
    event.stopPropagation();
     if (event.ctrlKey == true) {
             event.preventDefault();
         map.scrollWheelZoom.enable();
           $('#map').removeClass('map-scroll');
         setTimeout(function(){
             map.scrollWheelZoom.disable();
         }, 1000);
     } else {
         map.scrollWheelZoom.disable();
         $('#map').addClass('map-scroll');
     }

 });

  $(window).bind('mousewheel DOMMouseScroll', function (event) {
       $('#map').removeClass('map-scroll');
  })

当用户在地图上滚动然后检测到按钮或按下时，只需添加一个将在地图上显示消息的类。并防止屏幕在地图外放大和缩小。

Answer 2

我设法解决了你的第二个问题。

我使用css使用find . -name '*.nupkg' -mtime +175 -type f -printf '%s\t%h\0' | awk ' BEGIN { RS="\0"; } { split($2, a, "/"); sum[a[2]] += $1; } END { for (i in sum) { print i, sum[i]; } } '伪选择器显示消息。

::after

用javascript捕捉触摸事件。

#map { 
  &.swiping::after {
    content: 'Use two fingers to move the map';
  }
}

它检查类型是否为touchevent，如果您使用1个手指，如果是，则将该类添加到带有消息的地图中。如果您使用多个手指，则会移除该类。

Working demo我建议您使用移动设备。

Code pen from the demo

Answer 3

有一个很棒的库可以做到这一点。 Leaflet.GestureHandling

这是活页盒的附加功能，它是模块化的，可以使用npm安装。

这是一个使用传单和GestureHandling的工作示例。您也可以在移动设备上尝试它。

P.S。它具有多种语言：）

// Attach it as a handler to the map

const map = L.map('map', {
  gestureHandling: true
}).setView([51.505, -0.09], 13);

// Add tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

    #map {
      height: 400px;
      width: 400px;
    }

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>
  <link rel="stylesheet" href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css"
        type="text/css">
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
          integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
          crossorigin=""></script>
  <script src="//unpkg.com/leaflet-gesture-handling"></script>
  
  
  
  <div id="map"></div>

Leaflet.js：使用ctrl + scroll缩放地图＆amp;在移动设备上用两根手指移动地图

3 个答案: