Leaflet.js : Use ctrl + scroll to zoom the map & Move map with two fingers on mobile

标签 leaflet

我正在使用 http://leafletjs.com/ ...是否可以只:

  • 使用 ctrl + 滚动缩放 map
  • 在手机/平板上用两根手指移动 map

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

    到目前为止,这就是我的设置:
    // Leaflet Maps
    var contactmap = L.map('contact-map', {
            center: [41.3947688, 2.0787279], 
            zoom: 15,
            scrollWheelZoom: false
        });
    

    最佳答案

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

    它是传单的附加组件,可以直接使用,它也是模块化的,可以使用 npm 安装。

    这是一个使用传单和 GestureHandling 的工作示例。
    你也可以在手机上试试。

    附言它有多种语言:)

    // 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 : Use ctrl + scroll to zoom the map & Move map with two fingers on mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45982643/

    相关文章:

    javascript - 如何使用切换后的 Leaflet 图层组中的标记填充选区

    r - 在 R Shiny 中的传单中的圆形标记上打印标签

    cordova - mapbox 不适用于 monaca.io 项目

    node.js - 尝试安装 git 存储库时出现 npm 错误

    javascript - JavaScript 中的意外双循环

    javascript - 更新 Vector Tiles Leaflet geojson-vt 中的数据

    javascript - 如何获取传单 slider 的开始和结束

    javascript - 如何为 map 上的多边形生成填充颜色范围?

    javascript - 使用 geojson 数据和 oneeachfeature 的传单弹出窗口内的 Highcharts

    javascript - 传单 : how to access and update a marker inside a layer