使用动态更改输入逻辑化位置选择器 [英] Logicify Location picker using dynamic change for input

问题描述

我正在使用逻辑化位置选择器.

我想根据lat和lng值加载地图，如本示例所示:

I want to load the map based on the lat and lng value as demonstrated in this example:

<div id="us2" style="width: 500px; height: 400px;"></div>               
Lat.: <input type="text" id="us2-lat"/>
Long.: <input type="text" id="us2-lon"/>
<script>$('#us2').locationpicker({
    location: {latitude: 46.15242437752303, longitude: 2.7470703125},   
    radius: 300,
    inputBinding: {
        latitudeInput: $('#us2-lat'),
        longitudeInput: $('#us2-lon'),
    }
    });
</script>

但是在我的情况下，我想保留这些字段以隐藏lat和long，并在通过此功能根据城市名称获取lat和lng的值时动态触发更改:

But in my case i want to keep these fields for lat and long hidden and trigger change dynamically when i get the value of lat and lng based on the city name through this function:

$("#city").change(function() {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': "" + $("#city").val() + ", Pakistan"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      $("#lat").val(results[0].geometry.location.lat()).trigger('change');
      $("#lng").val(results[0].geometry.location.lng()).trigger('change');
      alert($("#lat").val() + " " + $("#lng").val());
    } else {
      alert("Something got wrong " + status);
    }
  });
});

这是我的隐藏字段:

<input type="hidden" id="lat">
<input type="hidden" id="lng">

加号我有一个id ="city"的选择，其中有一些城市名称，即拉合尔(Lahore)

plus i have a select with id = "city" having some city names i.e lahore

这就是我在做什么:

            var inital_lat = "31.554397"; /*lahore pakistan*/
            var inital_lng = "74.356078";
            $('#locationpicker').locationpicker({
              location: {
                latitude: inital_lat,
                longitude: inital_lng
              },
              radius: 100,
              inputBinding: {
                latitudeInput: $("#lat"),
                longitudeInput: $("#lng")
              }
            });
            $("#city").change(function() {
              var geocoder = new google.maps.Geocoder();
              geocoder.geocode({
                'address': "" + $("#city").val() + ", Pakistan"
              }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                  $("#lat").val(results[0].geometry.location.lat()).trigger('change'); /* i've also tried .change() */
                  $("#lng").val(results[0].geometry.location.lng()).trigger('change');

                  alert($("#lat").val() + " " + $("#lng").val());
                } else {
                  alert("Something got wrong " + status);
                }
              });
            });

如果我将文本字段的类型设置为= text并输入一些值，然后按Enter键，则地图会动态更改，但是对于动态更改(将字段保持隐藏状态)，它将不起作用.

if i make textfields type = text and enter some value and press enter the map dynamically changes, but for dynamic change (keeping fields hidden) it does not work.

任何帮助将不胜感激.

更新:

这是locationpicker.jquery.js文件中的代码:

here is a code from locationpicker.jquery.js file:

 if (inputBinding.latitudeInput) {
   inputBinding.latitudeInput.on("change", function(e) {
     if (!e.originalEvent) {
       return
     }
     GmUtility.setPosition(gmapContext, new google.maps.LatLng($(this).val(), gmapContext.location.lng()), function(context) {
       context.settings.onchanged.apply(gmapContext.domContainer, [GmUtility.locationFromLatLng(context.location), context.radius, false]);
     });
   });
 }
 if (inputBinding.longitudeInput) {
   inputBinding.longitudeInput.on("change", function(e) {
     if (!e.originalEvent) {
       return
     }
     GmUtility.setPosition(gmapContext, new google.maps.LatLng(gmapContext.location.lat(), $(this).val()), function(context) {
       context.settings.onchanged.apply(gmapContext.domContainer, [GmUtility.locationFromLatLng(context.location), context.radius, false]);
     });
   });
 }

看起来它正在寻找lat和lng字段中的更改，这就是我正在动态更改的内容.怎么了?

Looks like it looks for the change in lat and lng field, and thats what i'm doing changing it dynamically. whats the matter?

推荐答案

我遇到了同样的问题，要快速解决方案，您可以从粘贴到此的代码中更改库locationpicker.jquery.js的代码:

I have the same problem, for a quick solution you can change the code of the library locationpicker.jquery.js from the code you have pasted to this:

if (inputBinding.latitudeInput) {
   inputBinding.latitudeInput.on("change", function(e) {
     if (!e.originalEvent) {
       //return
     }
     GmUtility.setPosition(gmapContext, new google.maps.LatLng($(this).val(), gmapContext.location.lng()), function(context) {
       context.settings.onchanged.apply(gmapContext.domContainer, [GmUtility.locationFromLatLng(context.location), context.radius, false]);
     });
   });
 }
 if (inputBinding.longitudeInput) {
   inputBinding.longitudeInput.on("change", function(e) {
     if (!e.originalEvent) {
       //return
     }
     GmUtility.setPosition(gmapContext, new google.maps.LatLng(gmapContext.location.lat(), $(this).val()), function(context) {
       context.settings.onchanged.apply(gmapContext.domContainer, [GmUtility.locationFromLatLng(context.location), context.radius, false]);
     });
   });
 }

只需评论两次if (!e.originalEvent) {

这不是最佳解决方案，因为您正在更改库，并且如果更新库，则会丢失所做的更改.

This is NOT the best solution, because you are changing the library, and if you update the library you lose your changes.

这篇关于使用动态更改输入逻辑化位置选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！