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
당신의 소중한 시간을 절약했다면 upvote하십시오. :) –