2016-11-02 40 views
0

昨天我有一個問題,它已經解決herejQuery的Locationpicker設置多個位置

這適用於三分之二的案件,但最後一個我無法弄清楚如何得到它的工作一個location picker

總結我的上一個問題:我有一個locationpicker,我需要從初始化後提取某些值。爲了實現這一點,我使用這段代碼,函數setLocation是我自己的,並按預期工作。

$("#locationpicker").locationpicker({ 
    location: {latitude: 10, longitude: 10}, 
    radius: 10, 
    inputBinding: 
    { 
     latitudeInput: $("#locationpicker_lat"), 
     longitudeInput: $("#locationpicker_lon"), 
     radiusInput: $("#locationpicker_radius"), 
     locationNameInput: $("#locationpicker_address") 
    }, 
    oninitialized: function(component){ 
     setLocation("end"); 

     //1. attempt 
     component.location = {latitude: 20, longitude: 20}; 

     //2. attempt 
     var mapContext = component.locationpicker("map"); 
     mapContext.map.radius = 500; 

     //3. attempt - I work, but then setLocation below not any more 
     component.locationpicker("location", {latitude:10.0, longitude:10.0}); 

     setLocation("start"); 
    }, 
    enableAutocomplete: true 
}); 

我調用函數setLocation()兩次,但需要更改它們之間的位置。我無法在locationpicker的文檔中找到如何設置新位置(緯度,經度,半徑),並且各種嘗試都失敗了。其中兩個可以在代碼中查看。

我想過使用origianl google maps API,但不知道這是否有效,以及如何使用它。

我希望我詳細描述了我的問題,如果缺少任何信息,我會立即提供。

更新1

我能夠改變位置的值,我需要,但隨後第二組變量提取不正確了。

這個oninitilaized函數內部工作

component.locationpicker("location", {latitude:10.0, longitude:10.0}); 

由於函數setLocation不會在當前狀態下工作,我在這裏發佈,以及:

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

回答

1

嘗試的開始創建一個單獨的偵聽器和結束位置。這樣,您可以更輕鬆地調試您的應用程序並使其更易於理解。

示例代碼

<div id="start" style="width: 500px; height: 400px;"></div> 
<div id="end" style="width: 500px; height: 400px;"></div> 

<script> 

function setLocation_start(){ 
//your code for start 
$('#start').locationpicker(); 
} 

function setLocation_end(){ 
//your code for end 
$('#end').locationpicker(); 
} 

</script> 

的圖像是用於開始和結束位置的單獨的偵聽器的一個例子。

enter image description here

+0

的問題不再是相關的,但我很欣賞你的努力。不管怎樣,謝謝你。 – JRsz