Question

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

<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值时动态触发更改：

$("#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 =＆＃34; city＆＃34;有一些城市名称，即拉合尔

这就是我正在做的事情：

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

如果我使textfields键入= text并输入一些值并按Enter键动态地更改地图，但是对于动态更改（保持字段隐藏）它不起作用。

非常感谢任何帮助。

更新

这是来自locationpicker.jquery.js文件的代码：

 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字段中查找更改，这就是我正在动态更改它的内容。这是怎么回事？

Answer 1

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

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) {

中两次回复

这不是最佳解决方案，因为您正在更改库，如果更新库，则会丢失更改。

Answer 2

触发文本框的方式不起作用。使用事件对象触发。像这样重构你的$("#city").change()事件

            $("#city").change(function (evt) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address': "" + $("#city").val() + ", Pakistan"
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    evt.type = 'change';//change the event's type to change whatever it was originally
                    $("#lat").val(results[0].geometry.location.lat()).trigger(evt); //use the modified event object to trigger rather passing event's name
                    $("#lng").val(results[0].geometry.location.lng()).trigger(evt);

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

希望这有帮助。

使用动态更改输入

2 个答案: