stackoom
  简体   繁体   中英

Leaflet.js centerOn function issue

 原文  2017-12-05 14:06:22  1   1    javascript/ leaflet

Question

I have an issue with Leaflet. I'm trying to add a function which permits to pan to given coordinates. It's working but the map automatically reverts to its initial position (after a few milliseconds). I'm afraid I can't find my mistake here.

Here is the code: 

 .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/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.2.0/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 &copy; <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>

1 answers

solution1
 0 ACCPTED  2017-12-05 14:23:39

You need to stop postback to prevent it from resetting. Each time you click on center , your page is posted back to server which loads the page again.

You can fix this by doing following steps:

modify 

onsubmit="centerOn(

to 

onsubmit="return centerOn(

and change 

function centerOn(lat, lng){
  //mymap.setView({lat:lat, lng:lng}, mymap.getZoom());
  mymap.panTo([lat, lng]);
  //alert("Lattitude: " + lat + " longitude: " + lng);
}

to 

function centerOn(lat, lng){
  //mymap.setView({lat:lat, lng:lng}, mymap.getZoom());
  mymap.panTo([lat, lng]);
  return false;
  //alert("Lattitude: " + lat + " longitude: " + lng);
}

See working sample below 

 .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/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.2.0/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 &copy; <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="return 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]); return false; //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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Javascript pass results of function into another function in a Leaflet.js project leaflet.js map.on('click', function… not working for me Leaflet.js How to add a javascript addon to IIFE function Adding Markers in Leaflet.js Leaflet.js geoJson labels Leaflet.js strange borders Shifted TileLayer in leaflet.js Map not centered in leaflet.js How to use Angular JS with Leaflet.js Leaflet.js: WMS Layer Styles
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM