leaflet地図が勝手にウインドウ上端まで移動する
Q&A
Closed
発生している事象
普段Leafletを使って地図を表示させるときはウインドウ内全体で表示していたので気が付かなかったのですが、Leafletの地図を文章等の間に埋め込んで表示した場合で例えば、文章を読み進めて地図の上半分が表示された際に地図をクリックすると、地図の上端がウインドウの上端になるようにページ全体が勝手にスクロールされてしまいます。
当方Mac環境ですが、Safariで発生します。iframeを使って地図を埋め込んだ場合Chromeでも発生します。 Firefoxでは発生しないように見えます。
解決したいこと
地図クリックでも、地図ドラッグでも発生します。勝手にスクロールすると操作感が非常に悪いので、スクロールしないようにしたいです。
発生している状況
地図上端がページ途中にあり、地図下端がウインドウ外にある以下の状態で、地図を操作しようとする。
地図上端がページ上端にくるよう勝手にスクロールされる。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Leaflet test</title>
<style>
#header {
background-color: #f80;
height: 100px;
}
#wrapper {
width: 700px;
height: 750px;
}
#map {
width: inherit;
height: inherit;
background-color: #ddd;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.css" />
</head>
<body>
<div id="header">
test
</div>
<div id="wrapper">
<div id="map"></div>
</div>
<script type="text/javascript">
window.addEventListener( 'load', (event) => {
const map = L.map( "map", {
center: { lat: 34.0, lng: 138.0 },
zoom: 5
});
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
}).addTo( map );
});
</script>
</body>
</html>
試したこと
Leafletを使わない場合（地図を表示せず#map要素のみ配置する場合）はスクロールは発生しません。 #mapに対してaddEventListenerでfocus時にpreventDefault()するのも的外れのようです。Leafletのソースを読んでいますが、まだそれらしいところを発見できていません。
0