位置选择器提取值 [英] Location picker extract values

问题描述

我在我的网站上有一个位置选择器，目前为止效果不错(下面的代码).我有一个JS函数，它提取所有有趣的变量并将它们放在其他元素中.当用户单击一个调用此功能的按钮时，一切正常，但是当我想在加载时调用它时，它却无法正常工作.

I have a location picker in my website which works fine so far (code below). I have a JS function that extracts all interesting variables and places them in other elements. When a user clicks a button that calls this function everything works fine, but when I want to call it on load time it does not work as intended.

我的位置选择器(已删除CSS):

My location picker (CSS removed):

<div class="col-md-7">
    <h3>Locationpicker</h3>
    <table class="structure_table">
        <tr>
            <td>Location:</td>
            <td><input type="text" form="" id="locationpicker_address" /></td>
        </tr>
        <tr>
            <td>Radius:</td>
            <td><input type="text" form="" id="locationpicker_radius" /></td>
        </tr>
    </table>
    <div id="locationpicker"></div>
    <div>
        Lat: <input type="text" form="" id="locationpicker_lat" readonly />
        Lon: <input type="text" form="" id="locationpicker_lon" readonly />
    </div>
</div>

我用以下方法初始化它:

I initialize this with:

$("#locationpicker").locationpicker({
    location: {latitude: 52.518553, longitude: 13.404635},  
    radius: 200,
    inputBinding:
    {
        latitudeInput: $("#locationpicker_lat"),
        longitudeInput: $("#locationpicker_lon"),
        radiusInput: $("#locationpicker_radius"),
        locationNameInput: $("#locationpicker_address")
    },
    enableAutocomplete: true
});

要提取所有有趣的信息，请使用以下按钮:

To extract all interesting information I use this button:

<td><button type="button" onClick="setLocation('start');">Start</button><br /></td>
<td><span id="display_start_location"></span></td>

如果单击此按钮，一切正常，但是我需要在开始时自动调用此函数.因此，我在初始化locationpicker(第二个代码段)之后添加了此函数调用.

If I click this button everything works fine but I need to call this function automatically at the beginning. So I added this function call right behind initializing the locationpicker (second code snippet).

setLocation("start");

此功能的实际作用可以在这里看到:

What this function actually does can be seen here:

function setLocation(option)
{
    var lat = $("#locationpicker_lat").val();
    var lon = $("#locationpicker_lon").val();
    var add = $("#locationpicker_address").val();
    var rad = $("#locationpicker_radius").val();

    if(rad == "")
    {
        rad = 0;
    }

    if(option == "start")
    {
        document.getElementById("start_location_lat").value = lat;
        document.getElementById("start_location_lon").value = lon;
        document.getElementById("start_location_rad").value = rad;

        document.getElementById("display_start_location").innerHTML = add + ", Radius: " + rad + "m";
    }
    else
    {
        document.getElementById("end_location_lat").value = lat;
        document.getElementById("end_location_lon").value = lon;
        document.getElementById("end_location_rad").value = rad;

        document.getElementById("display_end_location").innerHTML = add + ", Radius: " + rad + "m";
    }
}

我希望看到这样的内容，具体取决于我提供的坐标:

I expect to see something like this, depending on the coordinates I provide:

但是，我总是得到这个:

Howevere, I always get this:

如果我手动单击图片中的按钮，一切将再次正常运行.我真的不知道为什么会这样.如果我需要提供更多信息，请告诉我.

If I click the button in the pictures manually everything works again. I have really no clue why this behaves as it does. If I need to provide more information please let me know.

推荐答案

$("#locationpicker").locationpicker({
    location: {latitude: 52.518553, longitude: 13.404635},  
    radius: 200,
    inputBinding:
    {
        latitudeInput: $("#locationpicker_lat"),
        longitudeInput: $("#locationpicker_lon"),
        radiusInput: $("#locationpicker_radius"),
        locationNameInput: $("#locationpicker_address")
    },
    oninitialized: function (component) {
        /* component is $('#locationpicker') as far as I can tell
            ...but it doesn't look like you need it */
        setLocation('start');
    },
    enableAutocomplete: true
});

似乎您遇到了回调问题.插件具有oninitialized回调，该回调在插件(因此，诸如locationpicker_lat之类的标签)初始化之后触发.使用它来确定何时执行setLocation应该可以解决您的问题.不要忘记从脚本顶层删除该调用，这样它就不会运行两次.

It seems like you've run into a callback issue. The plugin has an oninitialized callback which is fired after the plugin (and therefore the tags like locationpicker_lat) is initialized. Using it to determine when to execute setLocation should fix your issue. Don't forget to remove the call from the top-level of the script so it doesn't run twice.

这篇关于位置选择器提取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！