Buenas, soy nuevo en la comunidad. Mi problema es el siguiente, necesito guardar las coordenadas(latitud y longitud) en mi base de datos cuando la persona haga un registro en mi Aplicación Web. Antes de realizar el nuevo ingreso el usuario acepta compartir su ubicación y esta inmediatamente se muestra en un div
que tengo, lo pueden ver en la siguiente imagen:
A continuación les muestro el código que tengo dentro del formulario:
<script type="text/javascript">
if (navigator.geolocation) {
alert("¡Permitenos saber tu ubicación!");
navigator.geolocation.getCurrentPosition(mostrarUbicacion);
} else {alert("¡Error! Este navegador no soporta la
Geolocalización.");}
function mostrarUbicacion(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
var div = document.getElementById("ubicacion");
div.innerHTML = "Ubicación actual:" + latitud + " " + longitud;}
function refrescarUbicacion() {
navigator.geolocation.watchPosition(mostrarUbicacion);}
</script>
Necesito saber como puedo pasar el contenido del div
a mi base de datos, teniendo en cuenta que ya tengo el PHP que ejecuta los ingresos de otros campos del formulario. Agradecería que me pudieran ayudar.
Codigo php para realizar ingresos en bd
Muchas gracias
Codigo Formulario
<form method="post" action="guardar_ingresofinal.php" enctype="multipart/form-data">
<div class="row" style: aria-hidden="true">
<div class="col-xs-6" >
<div class="row" style: aria-hidden="true">
<div class="col-xs-12" align=left>
Estado:
<select class="selectpicker form-control" id="regestado" name="regestado" required>
<option value="">Seleccionar...</option>
<?php
$query = "SELECT estado FROM estados";
$resultado = $mysqli->query($query);
WHILE($row = $resultado->fetch_assoc()){ ?>
<option value="<?php echo $row['estado']?>"><?php echo $row['estado']?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-xs-6" >
<div class="row" style: aria-hidden="true">
<div class="col-xs-12" align=left>
Municipio:
<select class="selectpicker form-control" id="regmunicipio" name="regmunicipio" data-live-search="true" required>
<option value="">Seleccionar...</option>
<?php
$query = "SELECT idmunicipio, municipio FROM municipios ORDER BY municipio ASC";
$resultado = $mysqli->query($query);
WHILE($row = $resultado->fetch_assoc()){ ?>
<option value="<?php echo $row['municipio']?>"><?php echo $row['municipio']?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-xs-12" >
<div class="row" style: aria-hidden="true">
<div class="col-xs-12" align=left>
<p></p>
Institución Educativa:
<select class="selectpicker form-control" id="regcolegio" name="regcolegio" data-live-search="true" required>
<option value="">Seleccionar...</option>
<?php
$query = "SELECT idcolegio, colegio FROM colegios ORDER BY colegio ASC";
$resultado = $mysqli->query($query);
WHILE($row = $resultado->fetch_assoc()){ ?>
<option value="<?php echo $row['colegio']?>"><?php echo $row['colegio']?></option>
<?php } ?>
</select>
<p></p>
<div class="col-xs-12" align=center>
<b>Comentario de la actividad</b> <br>
</div>
<textarea name="regdes" rows="4" cols="40" class="col-xs-12" required></textarea>
<p></p>
<div class="row" style: aria-hidden="true">
<div class="col-xs-12" align=center>
<p></p>
<b>Evidencia de la actividad *</b> <br>
<input id="file-1" type="file" class="file" multiple=true data-preview-file-type="any" name="imagen">
<!--<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> Subir archivo
</button>-->
</div>
</div>
<p></p>
<div class="row" style: aria-hidden="true">
<div class="col-xs-12" align=center>
<input type="submit" class="btn btn-success" name="enviar" value="Enviar Registro" />
<!--Desactivado
<input id="btn_listar" type="button" class="btn btn-primary" value="Listar">
-->
</div>
<hr>
<!--Div que muestra ubicacion-->
<div class="col-xs-12" align=center id="ubicacion"></div>
<!--<input id="latitud" name="latitud" type="" value="" />-->
<script type="text/javascript">
if (navigator.geolocation) {
alert("¡Permitenos saber tu ubicación!");
navigator.geolocation.getCurrentPosition(mostrarUbicacion);
} else {alert("¡Error! Este navegador no soporta la Geolocalización.");}
function mostrarUbicacion(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
var div = document.getElementById("ubicacion");
div.innerHTML = "Ubicación actual:" + latitud + " " + longitud;}
function refrescarUbicacion() {
navigator.geolocation.watchPosition(mostrarUbicacion);}
</script>
<!--Fin Div que muestra ubicacion -->
</div>
</div>
</div>
</div>
</div>
</form>