ロケーションピッカーの抽出値

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を初期化した直後に追加しました（2番目のコードスニペット）。

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を実行するタイミングを決定すると、問題が解決するはずです。スクリプトのトップレベルから呼び出しを削除して、2回実行しないようにしてください。