【问题标题】:Google Maps marker getPosition() not working - '__e3_' error谷歌地图标记 getPosition() 不工作 - '__e3_' 错误
【发布时间】:2014-02-12 13:57:46
【问题描述】:

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

目前地图显示正常,并且标记的地理位置位于正确的位置。但是当您开始拖动它时,不会将 Lat 和 Lng 传递给 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 的代码。这只是更新了页面上显示 Lat 和 Lng 的两个表单元素:

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

【问题讨论】:

  • 什么是“updateMarkerPosition”? “marker”被调用时的值是多少?
  • @geocodezip function updateMarkerPosition(pos) { $('#posLat').val(pos.lat()); $('#posLong').val(pos.lng()); } 我希望将 lat 和 lng 发送到此页面,以更新页面上的两个表单元素。
  • 请用该信息更新您的问题(并回答另一个问题)。
  • @geocodezip 已更新。此外,标记只是位于地图上的标记。所以当它被移动时,我想获得更新的 LAt 和 Lng。标记只是其中之一,您可以随意拖动:Google Maps API Marker Animations
  • 当拖动事件触发时,调试器中标记的 value 是什么?那可能是this.getPosition() 而不是marker.getPosition()

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


【解决方案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());
          });

  }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-07-15
    • 2013-12-13
    • 2023-03-15
    • 2014-04-27
    • 1970-01-01
    • 1970-01-01
    • 2011-11-29
    • 2017-09-11
    相关资源
    最近更新 更多