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

问题描述

如何禁用鼠标交互或在打开的地图 iframe 中滚动?我有以下内容，我将属性 scrollwheel ="false" 设置为可否通过CSS禁用通过CSS的滚动或交互?

How do I disable mouse interactions or scrolling in an open maps iframe?I have the following and I put the attribute scrollwheel="false" Is there a way via css that can disable scrolling or interactions via 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来禁止滚动吗?

I am open to other options such as using javascript instead to disable scrolling?

推荐答案

如果控件(放大按钮，缩小按钮等)对您很重要，则可以使用以下类似内容.

If the controls (zoom in button, zoom out button etc) are important for you,you could use something like below.

# 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/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
# The js link from leaflet
<script src="https://unpkg.com/[email protected]/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>

这篇关于禁用地图滚动打开街道地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！