En mi proyecto, estoy usando un folleto para mostrar puntos. Quiero obtener la latitud actual y mucho tiempo después de hacer clic en el botón Show Your Location , probé el siguiente código: https://jsfiddle.net/a1p26e7v/
¿Qué debo hacer?
lat = '34.020479'; lon = '-118.4117325'; var map = L.map('map', { center: [lat, lon], zoom: 12 }); mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'; L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© ' + mapLink + ' Contributors', maxZoom: 18 }).addTo(map); var gIcon = L.icon({ iconUrl: 'https://up.grdagrd.com/image/map_maker.png', iconSize: [20, 32], }); map.on('click', function(e) { var latlng = map.mouseEventToLatLng(e.originalEvent); console.log(latlng.lat + ', ' + latlng.lng); L.marker([latlng.lat, latlng.lng], { icon: gIcon }).addTo(map); }); <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> <link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="latitude" autocomplete="off" readonly> <input type="text" name="longitude" autocomplete="off" readonly> <p></p> <button type="button" class="btnGetLoc"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"></path></svg>Show Your Location</button> <p></p> <div id="map" style="height: 250px;width: 360px;z-index: 9999999;"></div>Agregue una id html a su botón:
<button type="button" class="btnGetLoc" id="btnGetLoc"> ...y luego use lo siguiente, para ubicar la ubicación:
L.DomEvent.on(document.getElementById('btnGetLoc'), 'click', function(){ map.locate({setView: true, maxZoom: 16}); })Obtener las coordenadas después de la ubicación encontrada:
function onLocationFound(e) { var radius = e.accuracy; L.marker(e.latlng).addTo(map) .bindPopup("You are within " + radius + " meters from this point").openPopup(); L.circle(e.latlng, radius).addTo(map); } map.on('locationfound', onLocationFound);Puede encontrar más información en el Tutorial del folleto: https://leafletjs.com/examples/mobile/