传单.js：使用ctrl +滚动缩放地图和在移动设备上用两根手指移动地图

Question

我正在使用http://leafletjs.com/...仅限：

1. 使用ctrl 滚动缩放地图

2. 移动/平板电脑上的两个手指移动地图

...如此类似的Google地图？带有评论...

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

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

Answer 1

有一个惊人的库可以做到这一点。传单。

它是盒子正常工作的传单，也是模块化的，可以使用NPM安装。

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

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>

Answer 2

使用CTRL Zoom Zoom Map。我以自定义的方式做到了。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');
  })

以简单的方式，当用户滚动在地图上，然后检测到CTRL按钮是否按下，只是我添加一个类，该类将在地图上显示消息。并防止屏幕放大和放大地图。

Answer 3

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

我使用CSS使用::after伪选择器显示消息。

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

和JavaScript捕获触摸事件。

mapEl.addEventListener("touchstart", onTwoFingerDrag);
mapEl.addEventListener("touchend", onTwoFingerDrag);
function onTwoFingerDrag (e) {
  if (e.type === 'touchstart' && e.touches.length === 1) {
    e.currentTarget.classList.add('swiping')
  } else {
    e.currentTarget.classList.remove('swiping')
  }
}

它检查类型是否为触摸，如果您使用的是1个手指，则将其添加到MAP中，并随消息添加了邮件。如果您使用多个手指，则可以删除课程。

工作演示我建议您使用移动设备。

演示中的代码笔