首页 文章

隐藏的'lat'和'lng'字段未被删除，因此我的脚本仍在搜索不正确的地理位置的lat和lng结果

提问于
浏览 次
0

我有一个页面，用户可以将其地址输入“zipcode”字段 . 我还有一个“检测位置”按钮，用于对用户地址进行地理定位 . 当他们点击此按钮时，他们的城市名称和邮政编码将回显到'zipcode'字段，纬度和经度将传递给两个动态创建的隐藏输入字段 . 我还在页面上有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();
    });
}

我的想法是，如果用户开始在“zipcode”输入字段中键入或甚至粘贴新地址，并且已经存在隐藏的“lat”和“lng”字段，则会删除这些字段 .

你怎么看？我是否以最好的方式完成了这项工作？我是编码的新手，并且会喜欢一些反馈 . 非常感谢 .

javascript jquery

1 回答

  • 2

    为什么让自己变得困难？您不必每次都进行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 （event）作为参数：您应该只包含您需要的参数（在本例中为none），否则可能会使读取您代码的其他人感到困惑 .

    • 一致的编码风格：如果你选择使用jQuery，那么使用像 document.getElementsByClassName 这样的原生JS函数是没有意义的，因为它没有't work in IE8- and jQuery'更简单的类选择器 $('.class') ，相比之下 .

    • geomtery 是几何的拼写错误？

    回复于

相关问题