在wordpress中获取用户的纬度和经度

原则上提前感谢您在我的文盲问题上的合作。我在一个html+css+php页面中有一个js脚本；经典的"；并且当点击表单中的搜索按钮时获得客户端的纬度和经度。我现在把它转录下来，把它们放在上下文中。

document.getElementById("search").addEventListener("keydown", getCoord);
var latitud;
var longitud;
if (navigator.geolocation) {
// Obtenemos la ubicacion
obtener_localizacion();
} else {
alert("Tu navegador no soporta la geolocalización, actualiza tu navegador.");
} 
function obtener_localizacion() {
navigator.geolocation.getCurrentPosition(coordenadas);
}

function coordenadas(position) {
latitud = position.coords.latitude;
longitud = position.coords.longitude;

// alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
function getCoord(){
//$('#latCte').add(latitud);
document.getElementById('latCte').value = latitud;
document.getElementById('lngCte').value = longitud;
//alert (event.key);
//alert('Tus coordenadas son: ('+latitud+','+longitud+')');
//event.preventDefault();
}

我用同样的方式转录表格(没有大的案例(，但这是为了展示我所做的。

?>
<!DOCTYPE html>
<html lang = "ES_es">
<head>
<title>Busqueda</title>
<meta charset = "UTF-8" />
<!-- scripts css  -->
<link href="/busco/css/estilo.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

</head>
<body>
<h4 class = "text-primary">Busqueda</h4>
<div class = "container-fluid"> 
<form class = "form-inline" method="post" action="resultadoPrueba.php">
<div class = "row">
<div class = "col-md-4">
<hr class="hr-st"style = "border-top: 1px dotted #8c8b8b;"/>
<div class  =  "form-group">
<label>Busqueda:</label>
<input type="text" id = "search" class = "form-control" name = "search" required = "required">
<input type="hidden" id = "latCte"  name = "latCte" value=""  >
<input type="hidden" id = "lngCte"  name = "lngCte" value="">
<input type="submit" class="btn btn-primary" name="enviar" value="enviar" > 
</div>
</div>
</div>
</form>

</div>
</body>
<!--  scripts js -->
<!-- Buil:js  /js/*js  -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtm1NkW3Zli_2Ecj02lCHiopghTdwhOxY>" async></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="/busco/js/index.js"></script>
</html>

这做得很好，现在我想在wordPress中做同样的事情，我已经创建了自己的搜索表单来测试，但我不知道如何让js corray返回结果。我这么说是因为变量tatitude和经度为空。

add_action('wp_enqueue_scripts', 'ach_custom_js');
function ach_custom_js() {
wp_enqueue_script('custom', '/js/maps.js');
}

我在子主题的functions.php中添加了以下内容。我在标题中有表格，在标题中也有这个代码

<?php
/* script en linea  */
add_action('wp_head', 'ach_script_wp_head');
function ach_script_wp_head() {
?>
<script>
document.getElementById("search").addEventListener("keydown", getCoord);
var latitud;
var longitud;
if (navigator.geolocation) {
// Obtenemos la ubicacion
obtener_localizacion();
} else {
alert("Tu navegador no soporta la geolocalización, actualiza tu navegador.");
} 
function obtener_localizacion() {
navigator.geolocation.getCurrentPosition(coordenadas);
}

function coordenadas(position) {
latitud = position.coords.latitude;
longitud = position.coords.longitude;

// alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
function getCoord(){
//$('#latCte').add(latitud);
document.getElementById('latCte').value = latitud;
document.getElementById('lngCte').value = longitud;
//alert (event.key);
//alert('Tus coordenadas son: ('+latitud+','+longitud+')');
//event.preventDefault();
}   
</script>
<?php
}

标题中的形式如下：

<form class = "products-search" method="post" action="url-destino">
<div class="psearch-content">
<div class = "search-wrapper">      
<input type="text" id = "search" class = "search-field" name = "search" required = "required" placeholder="Estoy Buscando...oks">
<input type="hidden" id = "latCte"  name = "latCte" value=""  >
<input type="hidden" id = "lngCte"  name = "lngCte" value="">
</div>
<button type="submit" class="search-submit mf-background-primary" name="enviar">enviar</button>
</div>
</form>

情况是目标url的变量到达时没有值。

我想要的，如果可能的话，告诉我是否有另一种方法来放置用户的纬度和经度(如果我的方法不够(我也有一个细节，它是对maps.js文件的调用(我不知道如何调用链接谷歌外部。

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtm1NkW3Zli_2Ecj02lCHiopghTdwhOxY>" async></script>

提前原谅我的高度无知

只需使用此插件用户IP和位置。它有获取纬度和经度的快捷代码：

[userip_location type="lat"]
[userip_location type="lon"]

它还有另一个你需要的快捷代码(查看上面的链接(。

我发现了一个"局部细节"；解决方案我用javascript创建了一个函数，并直接调用它。我转录了下面的功能细节。我认为这也是一个"；经典的"；(当我提到经典时，我指的是以某种方式在网络上传播的函数(

const watcher = navigator.geolocation.watchPosition(mostrarLat);
const watcher2 = navigator.geolocation.watchPosition(mostrarLon);
setTimeout(() => {navigator.geolocation.clearWatch(watcher);
}, 15000);
setTimeout(() => {navigator.geolocation.clearWatch(watcher2);
}, 15000);
function mostrarLat (ubicacion) {
const lat = ubicacion.coords.latitude;
var el = document.getElementById("lat");
el.value = lat;
}
function mostrarLon (ubicacion) {
const lon = ubicacion.coords.longitude;
var doe = document.getElementById("lon");
doe.value = lon;
}

现在我有两个问题1.-精度表示客户端位置非常遥远(我必须看看如何提高精度(2.-第一次发送表单时，它会发送带有空数据的表单，并且只有在第二次搜索中才获取值(这是一个大问题(目前我不知道如何解决这个

相关内容

最新更新

热门标签：