Disable map scrolling open street maps

问题

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>

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

回答1:

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/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>

回答2:

Try 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>

回答3:

There is a method - https://venues.here.com/documentation/sdk/v1/example/disable-zoom-wheel-scroll

map.scrollWheelZoom.disable();

This implementation also works fine but with the first example you can use it conditionally

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);

回答4:

I wanted to do the same. Disable mouse scroll but keep everything else functional. Options here either completely disabled map, or they didn't work at all.

I ended up having to use Leaflet, which is a library that integrates with Open Street Maps. It's light, quick and easy. Follow their Quick Start guide to set up your map.

To disable scroll, you must pass the Option argument {scrollWheelZoom:false} when you initialize the map, like so:

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

来源：https://stackoverflow.com/questions/39736169/disable-map-scrolling-open-street-maps

标签

javascript

html

css

maps