禁用地图滚动打开街道地图

Question

如何禁用鼠标交互或在打开的地图中滚动 iframe？我有以下内容，我把属性 scrollwheel="false" 有没有办法通过 css 禁用滚动或通过 css 进行交互？

<iframe id= "mapsource" scrollwheel="false" src="http://www.openstreetmap.org/export/embed.html?bbox=-123.21233510971068%2C49.260691198361066%2C-123.18484783172607%2C49.27329289319553&amp;layer=mapquest&amp;marker=49.26699244809891%2C-123.19858074188232"></iframe>

我对其他选项持开放态度，例如使用 javascript 来禁用滚动？

Answer 1

尝试pointer-events: none;

#mapsource {
  pointer-events: none;
  }

<iframe id= "mapsource" scrollwheel="false" src="http://www.openstreetmap.org/export/embed.html?bbox=-123.21233510971068%2C49.260691198361066%2C-123.18484783172607%2C49.27329289319553&amp;layer=mapquest&amp;marker=49.26699244809891%2C-123.19858074188232"></iframe>

Answer 2

如果控件（放大按钮、缩小按钮等）对您很重要，您可以使用如下所示的控件。

# The magic - set the pointer-events to none to simply disable the
# scrolling on the map BUT NOT the functionality of the buttons!
# This happens only using leaflet api!
<style>
    #map {
        width: 100%;
        height: 300px;
        pointer-events: none;
    }
</style>

# The map element
<div id="map"></div>

# The css link from leaflet
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
# The js link from leaflet
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

# Custom source code to initialize the map
<script>
    var mymap = L.map("map").setView([37.980114, 23.729924], 17);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);
    L.marker([37.980114, 23.729924]).addTo(mymap);

</script>

Answer 3

有一个方法 - https://venues.here.com/documentation/sdk/v1/example/disable-zoom-wheel-scroll

map.scrollWheelZoom.disable();

此实现也可以正常工作，但对于第一个示例，您可以有条件地使用它

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        scrollWheelZoom: false,   
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);

Answer 4

我也想这样做。禁用鼠标滚动但保持其他所有功能。这里的选项要么完全禁用地图，要么根本不起作用。

我最终不得不使用 Leaflet，这是一个与 Open Street Maps 集成的图书馆。它轻便、快速、简单。按照他们的 Quick Start guide 设置您的地图。

要禁用滚动，您必须在初始化地图时传递选项参数 {scrollWheelZoom:false}，如下所示：

var mymap = L.map('mapid', {scrollWheelZoom:false}).setView([51.505, -0.09], 13);

禁用地图滚动打开街道地图

Disable map scrolling open street maps

html

javascript

css

maps