Google地图标记getPosition()无效 - “__ e3_”错误

时间:2014-01-22 13:22:52

标签: javascript google-maps google-maps-api-3

我一直在努力让下面的代码工作。该代码的目的是能够在人员进行地理定位时对其进行地理定位,然后在放置标记时能够在拖动时获取标记的Lat和Lng。

目前地图显示正常,标记在正确的位置进行了地理定位。但是当你开始拖动它时,没有Lat和Lng传递给updateMarkerPosition。

我在Chrome控制台中遇到的错误是:*未捕获的TypeError:无法读取未定义的属性'_ e3 '

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

<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的代码。这刚刚更新了页面上显示Lat和Lng的两个表单元素:

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

1 个答案:

答案 0 :(得分:3)

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

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

  }