jQuery Locationpicker设置了多个位置

时间:2016-11-02 10:18:45

标签: javascript jquery google-maps location

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

这适用于三个案例中的两个,但对于最后一个案例,我无法弄清楚如何让它发挥作用。

总结我之前的问题:我有一个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 个答案:

答案 0 :(得分: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