0
リーフレットに問題があります。私は与えられた座標にパンすることを可能にする関数を追加しようとしています。動作していますが、マップは自動的に初期位置に戻ります（数ミリ秒後）。私はここで私の間違いを見つけることができないのではないかと心配しています。ここでLeaflet.js centerOn関数の問題
コードです：
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
.btn:hover {
background: #2b8ecc;
background-image: -webkit-linear-gradient(top, #2b8ecc, #4d687a);
background-image: -moz-linear-gradient(top, #2b8ecc, #4d687a);
background-image: -ms-linear-gradient(top, #2b8ecc, #4d687a);
background-image: -o-linear-gradient(top, #2b8ecc, #4d687a);
background-image: linear-gradient(to bottom, #2b8ecc, #4d687a);
text-decoration: none;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 10;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.latlng{
position: fixed;
top:20px;
right: 12px;
color: white;
font-Family: Arial;
font-size: 14px;
}
.latlng input[type="submit"]{
background-color: #4CAF50;
color: white;
cursor: pointer;
}<!DOCTYPE html>
<html style="overflow-y: hidden; background: #666666;">
<head>
<title>WIMP</title>
<link rel="stylesheet" href="style.css">
<meta name="description" content="Geo Tactical System">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
</head>
<div id="mapid" style="position: fixed; width: 98.5vw; height: 90vh; bottom: 12px;"></div>
<script>
var mymap = L.map('mapid', { zoomControl:false }).setView([48.866, 2.3333], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
</script>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<form class="latlng" onsubmit="centerOn(document.getElementById('lat').value, document.getElementById('lng').value);">
Lattitude:
<input type="text" name="lat" id="lat" />
Longitude:
<input type="text" name="lng" id="lng" />
<input type="submit" value="Centrer" />
</form>
<script>
function centerOn(lat, lng){
//mymap.setView({lat:lat, lng:lng}, mymap.getZoom());
mymap.panTo([lat, lng]);
//alert("Lattitude: " + lat + " longitude: " + lng);
}
function onMapHover(e){
document.getElementById("lat").value = e.latlng.lat;
document.getElementById("lng").value = e.latlng.lng;
}
mymap.on("mousemove", onMapHover);
</script>
</body>
</html>
以下の作業のサンプルを参照してください！ – BOna
あなたの貴重な時間を節約すれば、アップしてください。 :) –