Google地图标记getPosition（）无效 - “__ e3_”错误

Question

I have been struggling to get the below code to work. The aim of the code is to be able to Geolocate the person if they allow geolocation, then when the marker is placed be able to get the Lat and Lng of the marker as it is being dragged around.

Currently the map displays fine and the marker is geolocated in the correct place. But when you begin to drag it, no Lat and Lng is passed to updateMarkerPosition.

The error which I am getting in my chrome console is: *Uncaught TypeError: Cannot read property '_ e3 ' of undefined*

Here is the script I am using, also displaying the files which I include to the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>




function initialize() {
  var mapOptions = {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('mapCanvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    // Geolocation found
            navigator.geolocation.getCurrentPosition(function(position) {
              var pos = new google.maps.LatLng(position.coords.latitude,
                                               position.coords.longitude);


              var marker = new google.maps.Marker({
                position: pos,
                title: 'Your Location',
                map: map,
                draggable: true
              });

              map.setCenter(pos);

            }, function() {
                // User has cancelled and not let the browser find them using geolocation

                var pos = new google.maps.LatLng(-34.397, 150.644);
                var map = new google.maps.Map(document.getElementById('mapCanvas'), {
                  zoom: 8,
                  center: pos,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var marker = new google.maps.Marker({
                  position: pos,
                  title: 'Point A',
                  map: map,
                  draggable: true
                });

            });

  } else {
    // Browser doesn't support Geolocation
          var pos = new google.maps.LatLng(-34.397, 150.644);
          var map = new google.maps.Map(document.getElementById('mapCanvas'), {
            zoom: 8,
            center: pos,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });

          var marker = new google.maps.Marker({
            position: pos,
            title: 'Point A',
            map: map,
            draggable: true
          });

  }



  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerPosition(marker.getPosition());
  });


}

google.maps.event.addDomListener(window, 'load', initialize);

Code for updateMarkerPosition. This just updated two form elements on the page which display the Lat and Lng:

function updateMarkerPosition(pos) {
  $('#posLat').val(pos.lat());
  $('#posLong').val(pos.lng());
}

Answer 1

geolocation is asynchronous. The marker is not defined until the callback runs. You need to assign the listener inside the callback function (where the marker is created).

 // Try HTML5 geolocation
  if(navigator.geolocation) {
    // Geolocation found
            navigator.geolocation.getCurrentPosition(function(position) {
              var pos = new google.maps.LatLng(position.coords.latitude,
                                               position.coords.longitude);


              var marker = new google.maps.Marker({
                position: pos,
                title: 'Your Location',
                map: map,
                draggable: true
              });
              google.maps.event.addListener(marker, 'drag', function() {
                updateMarkerPosition(marker.getPosition());
              });

              map.setCenter(pos);

            }, function() {
                // User has cancelled and not let the browser find them using geolocation

                var pos = new google.maps.LatLng(-34.397, 150.644);
                var map = new google.maps.Map(document.getElementById('mapCanvas'), {
                  zoom: 8,
                  center: pos,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var marker = new google.maps.Marker({
                  position: pos,
                  title: 'Point A',
                  map: map,
                  draggable: true
                });
                google.maps.event.addListener(marker, 'drag', function() {
                  updateMarkerPosition(marker.getPosition());
                });

            });

  } else {
    // Browser doesn't support Geolocation
          var pos = new google.maps.LatLng(-34.397, 150.644);
          var map = new google.maps.Map(document.getElementById('mapCanvas'), {
            zoom: 8,
            center: pos,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });

          var marker = new google.maps.Marker({
            position: pos,
            title: 'Point A',
            map: map,
            draggable: true
          });
          google.maps.event.addListener(marker, 'drag', function() {
            updateMarkerPosition(marker.getPosition());
          });

  }