jQuery GeoComplete - 拖动标记时获取位置

时间:2012-12-12 08:33:19

标签: javascript jquery

http://ubilabs.github.com/geocomplete/examples/draggable.html为例。

jQuery("#geocomplete").bind("geocode:dragged", function(event, latLng){
        jQuery("input[name=lat]").val(latLng.lat());
        jQuery("input[name=lng]").val(latLng.lng());            
    });

拖动标记后,我能够以lat lng的形式获得标记位置。但是在拖动后我无法获得标记的当前位置。

我想在拖动后更新标记当前位置的位置文本框。

3 个答案:

答案 0 :(得分:5)

我设法找到了更好的解决方法!

Nadeeshani发布的关于你的工作不是很精确,它将地图集中在最近的地址。

我设法通过使用谷歌地理编码来修复此问题,测试以下代码。

var options = {
  map: "#mapnew",
  country: 'uk',
  mapOptions: {
    streetViewControl: false,
    mapTypeId : google.maps.MapTypeId.HYBRID
  },
  markerOptions: {
    draggable: true
  }
};

$("#address").geocomplete(options).bind("geocode:result", function(event, result){
  $('#logs').html(result.formatted_address);
  var map = $("#address").geocomplete("map");
  map.setZoom(18);
  map.setCenter(result.geometry.location);
});

$("#address").bind("geocode:dragged", function(event, latLng){
  console.log('Dragged Lat: '+latLng.lat());
  console.log('Dragged Lng: '+latLng.lng());
  var map = $("#address").geocomplete("map");
  map.panTo(latLng);
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({'latLng': latLng }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        var road = results[0].address_components[1].long_name;
        var town = results[0].address_components[2].long_name;
        var county = results[0].address_components[3].long_name;
        var country = results[0].address_components[4].long_name;
        $('#logs').html(road+' '+town+' '+county+' '+country);
      }
    }
  });
});

查看我的JSFiddle Example

答案 1 :(得分:1)

这可能不是100%完美的解决方案,但我也有同样的问题,这就是我通过它的方式。这是一种解决方法。

$("#geocomplete").bind("geocode:dragged", function(event, latLng){          
$("input[name=lat]").val(latLng.lat());
$("input[name=lng]").val(latLng.lng()); 
$("#geocomplete").geocomplete("find", latLng.toString());
});

这里唯一的问题是地图设置为默认的zomm大小,因为自动完成在这里重新初始化。

希望这会有所帮助

答案 2 :(得分:0)

我不确定这是否是同一个问题,但我的'find'在执行多次'find'时也返回了错误的结果。这似乎是因为'bounds'是在后续查找中设置的,并且返回错误的结果。

作为一种解决方法,我通过添加以下行来更改“jquery.geocomplete.js”文件:

request.bounds = this.options.bounds;

就在这一行(352)之前:

this.geocoder.geocode(request, $.proxy(this.handleGeocode, this));

然后查找应该按照正常情况工作:

$("#geocomplete").geocomplete("find", latLng.toString());