Draggable pin not updating coordinates in Google Maps API

问题

I have this code that allows users to insert pins in Google Maps, by clicking on the map. Now I'm trying to make this pin draggable, so I just added draggable:true, in the initialization of the markers. But this is not updating the field with the coordinates. It only works if the user clicks in another place. What am I missing?

  // global "map" variable
    var map = null;
    var marker = null;

    // popup window for pin, if in use
    var infowindow = new google.maps.InfoWindow({ 
        size: new google.maps.Size(150,50)
        });

    // A function to create the marker and set up the event window function 
    function createMarker(latlng, name, html) {

    var contentString = html;

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    google.maps.event.trigger(marker, 'click');    
    return marker;


}

function initialize() {

    // the location of the initial pin
    var myLatlng = new google.maps.LatLng(-19.919131, -43.938637);

    // create the map
    var myOptions = {
        zoom: 15,
        center: myLatlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }


    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // establish the initial marker/pin


    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Property Location", 
    draggable:true,
    icon: {
        url: 'https://4.bp.blogspot.com/-nHydF9OdHLw/V8OxZbpJW6I/AAAAAAAAADM/G_QLEm7aScUOc3XwZmc5X8DmMHp7FK3RwCLcB/s1600/BikeSpot-Pin-Logo.png',

        // base image is 60x60 px
        size: new google.maps.Size(64, 96),

        // we want to render @ 30x30 logical px (@2x dppx or 'Retina')
        scaledSize: new google.maps.Size(32, 48), 
       // the most top-left point of your marker in the sprite
        // (based on scaledSize, not original)
        origin: new google.maps.Point(0, 0),

        // the "pointer"/anchor coordinates of the marker (again based on scaledSize)
        anchor: new google.maps.Point(16, 48)
    }
});

    // establish the initial div form fields
   formlat = myLatlng.lat();
    formlng = myLatlng.lng();
    document.getElementById("LatLng-Input").value = myLatlng.toUrlValue();

    // close popup window
    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

    // removing old markers/pins
    google.maps.event.addListener(map, 'click', function(event) {
        //call function to create marker
         if (marker) {
            marker.setMap(null);
            marker = null;
         }

        // Information for popup window if you so chose to have one
        /*
         marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng);
        */

        var image = 'https://4.bp.blogspot.com/-nHydF9OdHLw/V8OxZbpJW6I/AAAAAAAAADM/G_QLEm7aScUOc3XwZmc5X8DmMHp7FK3RwCLcB/s1600/BikeSpot-Pin-Logo.png';
        var myLatLng = event.latLng ;
        /*  
        var marker = new google.maps.Marker({
            by removing the 'var' subsquent pin placement removes the old pin icon
        */
        marker = new google.maps.Marker({   
            position: myLatLng,  
            map: map,
            icon: image,
            title:"Bicicletario",

    icon: {
        url: 'https://4.bp.blogspot.com/-nHydF9OdHLw/V8OxZbpJW6I/AAAAAAAAADM/G_QLEm7aScUOc3XwZmc5X8DmMHp7FK3RwCLcB/s1600/BikeSpot-Pin-Logo.png',

        // base image is 60x60 px
        size: new google.maps.Size(64, 96),

        // we want to render @ 30x30 logical px (@2x dppx or 'Retina')
        scaledSize: new google.maps.Size(32, 48), 

       // the most top-left point of your marker in the sprite
        // (based on scaledSize, not original)
        origin: new google.maps.Point(0, 0),

        // the "pointer"/anchor coordinates of the marker (again based on scaledSize)
        anchor: new google.maps.Point(16, 48)

    }


        });

        // populate the form fields with lat & lng 
  formlat = event.latLng.lat();
   formlng = event.latLng.lng();
   document.getElementById("LatLng-Input").value  = formlat +", "+formlng

});
}


    });

}

The HTML with the input I'm receiving the coordinates is:

<div id='map_canvas'/>

<input  id='LatLng-Input' size='20' type='text'/>

回答1:

It's not updating the coordinates because you don't tell it to do so. You have to add a dragend-handler and update your element, where you display the coordinates when the drag of the marker is finished:

marker.addListener('dragend', function(event){
    document.getElementById("LatLng-Input").value = event.latLng.lat() + ", " + event.latLng.lng();
});

If you would have an infowindow you would have to update the content of the infowindow:

marker.addListener('dragend', function(event){
    infoWindow.setContent(event.latLng.lat() + ", " + event.latLng.lng());
});

If you want to update the coordinates also while dragging, add another handler with 'drag' instead of 'dragend'.

来源：https://stackoverflow.com/questions/39198844/draggable-pin-not-updating-coordinates-in-google-maps-api