在 wordpress 中獲取用戶的經緯度
[英]get latitude and longitude of a user in 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 和 longitude 到達空的。
add_action('wp_enqueue_scripts', 'ach_custom_js');
function ach_custom_js() {
wp_enqueue_script('custom', '/js/maps.js');
}
我在子主題的functions.php中添加了以下內容。 我在 header 中有表格，在 header 中有這個代碼
<?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
}
header中的表格如下：
<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>
提前原諒我的高度無知
2 個解決方案
解決方案1
0 2022-08-08 18:11:40
只需使用這個插件User IP 和 Location 。 它具有獲取緯度和經度的簡碼：
[userip_location type="lat"]
[userip_location type="lon"]
它還有您需要的另一個短代碼（檢查上面的鏈接）。
解決方案2
0 2022-08-11 13:04:17
我找到了一個“部分細節”的解決方案。 我在 javascript 中創建了一個 function 並直接調用它。 我在下面轉錄 function 詳細信息。 我認為它也是一個“經典”（當我提到經典時，我是指以某種方式在網絡上傳播的功能）
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.- 第一次發送表單時，它用空數據發送它，它只來自第二個搜索它目前的值（這是一個大問題）我不知道如何解決這個問題
如何在OpenLayers中獲取用戶的當前位置以及緯度和經度
[英]how to get the current location of the user along with latitude and longitude in OpenLayers
在 PHP 或 JavaScript 中獲取用戶的緯度和經度以在 PHP 中使用
[英]Get latitude and longitude of user in PHP or JavaScript for use in PHP
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.