位置选取器提取值

Question

我的网站上有一个 location picker 目前运行良好（代码如下）。我有一个 JS 函数，它提取所有有趣的变量并将它们放在其他元素中。当用户单击调用此函数的按钮时，一切正常，但当我想在加载时调用它时，它无法按预期工作。

我的位置选择器（CSS 已删除）：

<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>

我初始化为：

$("#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
});

要提取所有有趣的信息，我使用此按钮：

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

如果我点击这个按钮，一切正常，但我需要在开始时自动调用这个函数。所以我在初始化位置选择器之后添加了这个函数调用（第二个代码片段）。

setLocation("start");

这个函数的实际作用可以在这里看到：

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";
    }
}

我希望看到这样的东西，具体取决于我提供的坐标：

然而，我总是这样：

如果我手动单击图片中的按钮，一切都会恢复正常。我真的不知道为什么会这样。如果我需要提供更多信息，请告诉我。

Answer 1

$("#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 应该可以解决您的问题。不要忘记从脚本的顶层删除调用，这样它就不会运行两次。

位置选取器提取值

Location picker extract values

html

javascript

location

onload

twitter-bootstrap