jQuery Locationpicker 设置多个位置

Question

我昨天遇到了location picker 的问题，已解决here

这适用于三分之二的情况，但对于最后一种情况，我不知道如何让它工作。

总结我之前的问题：我有一个位置选择器，我需要在初始化后从中提取某些值。为了实现这一点，我使用了这段代码，函数 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 的文档中找不到如何设置新位置（纬度、经度、半径），并且各种尝试也失败了。其中两个可以在代码中查看。

我考虑过使用原始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";
    }
}

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

该图像是开始和结束位置的单独侦听器的示例。