javascript - 谷歌地图标记 getPosition() 不工作 - '__e3_' 错误

Question

我一直在努力让下面的代码工作。该代码的目的是能够在允许地理定位的情况下对人员进行地理定位，然后在放置标记时能够在标记被拖动时获得标记的纬度和经度。

目前 map 显示正常，标记定位在正确的位置。但是当您开始拖动它时，没有纬度和经度被传递给 updateMarkerPosition。

我在 chrome 控制台中遇到的错误是:*Uncaught TypeError: Cannot read property '_e3' of undefined*

这是我正在使用的脚本，还显示了我包含在页面中的文件。

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

updateMarkerPosition 的代码。这只是更新了页面上显示纬度和经度的两个表单元素:

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

Answer 1

地理定位是异步的。在回调运行之前，标记不会被定义。您需要在回调函数(创建标记的位置)内分配监听器。

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

  }