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>

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

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

我希望看到类似的内容，具体取决于我提供的坐标：

Howevere，我总是得到这个：

如果我手动点击图片中的按钮，一切都会有效。我真的不知道为什么这样做会像它一样。如果我需要提供更多信息，请告诉我。

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

位置选择器提取值

1 个答案: