隐藏的 'lat' 和 'lng' 字段没有被删除，所以我的脚本仍在搜索来自不正确地理位置的 lat 和 lng 结果

Posted 2023-02-23

【中文标题】隐藏的 \'lat\' 和 \'lng\' 字段没有被删除，所以我的脚本仍在搜索来自不正确地理位置的 lat 和 lng 结果

【英文标题】：The hidden 'lat' and 'lng' fields were not removed and so my script was still searching for the lat and lng results from the incorrect geolocation隐藏的 'lat' 和 'lng' 字段没有被删除，所以我的脚本仍在搜索来自不正确地理位置的 lat 和 lng 结果

【发布时间】：2015-01-17 15:41:40

【问题描述】：

我有一个页面，用户可以在其中将他们的地址输入到“邮政编码”字段中。我还有一个“检测位置”按钮，可以对用户地址进行地理定位。当他们单击此按钮时，他们的城市名称和邮政编码会回显到“邮政编码”字段中，并且纬度和经度将传递给两个动态创建的隐藏输入字段。我在页面上也有 Places API。

回显地址和邮政编码并创建隐藏字段的代码如下：

if (results[1]) 
    split1 = results[1].formatted_address.split(', ');
    // echo the geolocation address into the 'zipcode' input field
    document.getElementById('zipcode').value = split1[1] + ', ' + split1[2]; // city name and postcode
    // if hidden lat and lng fields are present from Places API, remove them
    $(".storelocator_body form").find("input.geomtery").remove();
    // produce new hidden fields with the new lat and lng values
    $(".storelocator_body form").append("<input type='hidden' class='geomtery' name='lat' value='" + lat + "'>");
    $(".storelocator_body form").append("<input type='hidden' class='geomtery' name='lng' value='" + lng + "'>");
 else 
    alert("No results found");

我遇到的问题是，有时地理位置会给出虚假的结果，尤其是当我从没有无线网卡的桌面搜索时。当我手动将 'zipcode' 输入字段更改为正确的地址时，隐藏的 'lat' 和 'lng' 字段没有被删除，因此我的脚本仍在搜索来自不正确地理位置的 lat 和 lng 结果。

我想出的解决方案如下：

if(document.getElementsByClassName("geomtery"))
    $("#zipcode").on("input",function(e)
        $(".storelocator_body form").find("input.geomtery").remove();
    );

我的想法是，如果用户开始在“邮政编码”输入字段中键入甚至粘贴新地址，并且已经存在隐藏的“纬度”和“经纬度”字段，那么这些字段将被删除。

你怎么看？我是否以最好的方式做到了这一点？我是编码新手，希望得到一些反馈。 非常感谢。

【问题讨论】：

验证 document.getElementById('zipcode').value 的长度并将其返回到适当的经纬度或显示一些适当的页面

【参考方案1】：

为什么要为难自己？无需每次都进行 DOM 插入，您可以简单地检测字段是否存在（或者更好的是，直接将它们包含在 html 中），然后更改它们的值。

 // here your Places code, field as optional parameter (to retrieve from zipcode afterwards)  
function placesAPIcall(field)  [...] return  lat: 'value', long: 'value'
// on page load
function initPlaces() 
   var result = placesAPIcall(), lat = result.lat, lng = result.lng;
   if (!$('.geomtery[name=lat]').length)
      $('.storelocator_body form').append('<input type="hidden" class="geomtery" name="lat" value="' + lat + '">');
   if (!$('.geomtery[name=lng]').length)
      $('.storelocator_body form').append('<input type="hidden" class="geomtery" name="lng" value="' + lng + '">');

// everytime #zipcode loses focus, value updates
function updateLatLong()  
   var result = placesAPIcall($('#zipcode')), lat = result.lat, lng = result.lng;
   $('.geomtery[name=lat]').val(lat); // set the value
   $('.geomtery[name=lng]').val(lng); // set the value

);
$('#zipcode').on('change': updateLatLong, 'load': initPlaces);

一些提示：

在单引号 (") 和双引号 (') 之间进行选择并保持一致。 就我个人而言，我总是将" 用于 HTML，' 用于 JS。 据我所知，jQuery 中没有input 事件，请改用change 或keyup 或表单submit。 您在函数中将e（事件）作为参数发送：您应该只包含您需要的参数（在本例中为无），否则可能会混淆阅读您代码的其他人。 一致的编码风格：如果您选择使用 jQuery，那么使用像 document.getElementsByClassName 这样的原生 JS 函数是没有意义的，因为它在 IE8 中不起作用，而 jQuery 更简单的类选择器 $('.class') 则相反。 geomtery 是几何错字？

【讨论】：

你在@Tyblitz 那里给了我一些很棒的建议，所以谢谢你！相对于更少的 DOM 插入，使代码更高效是绝对有意义的。我现在已经编辑了我的代码，我对它更满意了，所以谢谢你。许多非常好的点！