javascript - jQuery GeoComplete - get Location when marker is dragged - Stack Overflow

admin管理员组

文章数量:1394990

Using .html as an example.

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

I am able to get the marker position in form of lat lng after the marker is dragged. But I am not able to get current location of the marker after being dragged.

I want to update my location text box on the current position of marker after being dragged.

Using http://ubilabs.github./geoplete/examples/draggable.html as an example.

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

I am able to get the marker position in form of lat lng after the marker is dragged. But I am not able to get current location of the marker after being dragged.

I want to update my location text box on the current position of marker after being dragged.

• javascript
• jquery

Share Improve this question Follow edited Dec 12, 2012 at 8:56 j0k 22.8k2828 gold badges8181 silver badges9090 bronze badges asked Dec 12, 2012 at 8:33 Reverse HackReverse Hack 3111 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I managed to find a better work around!

The work around you that Nadeeshani posted isn't very precise and it centres the map to a nearest address.

I managed to fix this by using the google geocoded, test the following code.

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

$("#address").geoplete(options).bind("geocode:result", function(event, result){
  $('#logs').html(result.formatted_address);
  var map = $("#address").geoplete("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").geoplete("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_ponents[1].long_name;
        var town = results[0].address_ponents[2].long_name;
        var county = results[0].address_ponents[3].long_name;
        var country = results[0].address_ponents[4].long_name;
        $('#logs').html(road+' '+town+' '+county+' '+country);
      }
    }
  });
});

See my JSFiddle Example

This may not be a 100% perfect solution, but I too had the same issue and this is how I got through it. This is kind of a workaround.

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

The only problem here is the map is setting to its default zomm size since the autoplete is sort of re initializing here.

Hope this will help

I am not sure if this is the same issue, but my 'find' also returned the incorrect result when doing more then one 'find'. It seems it is because the 'bounds' are set on subsequent finds, and the wrong results are return.

As a workaround, I changed the "jquery.geoplete.js" file as follow, by adding this line:

request.bounds = this.options.bounds;

just before this line (352):

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

then the find should work as per normal:

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

本文标签： javascriptjQuery GeoCompleteget Location when marker is draggedStack Overflow