Question

我的谷歌地图，我正在尝试显示标记位置的纬度和经度。我收到以下错误"Uncaught ReferenceError: latLng is not defined "。我应该在这里包含什么。

我的代码如下

JS：

var map;
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-29.3456, 151.4346),
        zoom: 2,
        scrollwheel: false,
        disableDefaultUI: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function addMarker() {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-29.3456, 151.4346),
        map: map,
        draggable: true
    });
}
//show the marker position

function updateMarkerPosition(latLng) {
    document.getElementById('info').innerHTML = [
        latLng.lat(),
        latLng.lng()
    ].join(', ');
}
updateMarkerPosition(latLng);
geocodePosition(latLng);

HTML：

<div id="info"></div>

由于

Answer 1

我认为您必须忘记初始化地图。我在这里修了你的小提琴。 http://jsfiddle.net/harendra/Lt2rp/1/

  var map;
initialize();
var curlatLng=new google.maps.LatLng(-29.3456, 151.4346)
updateMarkerPosition(curlatLng);


function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-29.3456, 151.4346),
        zoom: 2,
        scrollwheel: false,
        disableDefaultUI: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

function addMarker() {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-29.3456, 151.4346),
        map: map,
        draggable: true
    });
}

function updateMarkerPosition(latLng) {
    document.getElementById('info').innerHTML = [
        latLng.lat(),
        latLng.lng()
    ].join(', ');
}

Answer 2

原因是你没有为“updateMarkerPosition（latLng）”指定（即定义）'latLng'，例如，var latLng =“37.780145，-122.418435”（请注意，您可能需要将此字符串坐标转换为实际数字稍后）。还有一些事项需要注意：

未定义“geocodePosition”功能。
“updateMarkerPosition”函数不太正确，因此即使您将lat lng值传递给此函数（例如“updateMarkerPosition（-27.3959,153.0626）”，它也无法正确显示。这是因为没有属性lat的“lat”和“lng”。
“updateMarkerPosition”函数未对地图进行更新或执行任何操作。

不确定这是否是您正在寻找的内容，但这是一个快速而肮脏的示例，其中Google地图会在加载时选择您当前的位置并显示您的位置坐标。然后，您可以在文本框中指定坐标（格式为：37.780145，-122.418435）并点击搜索。然后地图将更新并显示您输入的位置。

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style type="text/css">
      #map-canvas {
        height: 400px;
        width: 500px;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script>
      var map;

      function initialize() {
        var mapOptions = {
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // Try HTML5 geolocation
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var posRounded = position.coords.latitude.toFixed(4) + "," + position.coords.longitude.toFixed(4);

            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
              content: 'You are here: ' + posRounded
            });

            map.setCenter(pos);
          }, function() {
            handleNoGeolocation(true);
          });
        } else {
          // Browser doesn't support Geolocation
          handleNoGeolocation(false);
        }
      }

      function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
          var content = 'Error: The Geolocation service failed.';
        } else {
          var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
          map: map,
          position: new google.maps.LatLng(60, 105),
          content: content
        };

        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
      }

      // Custom Function: Update Marker Position
      function updateMarkerPosition() {
        var latLng = document.getElementsByClassName('lat-lng')[0].value.replace(" ","").split(",");
        var pos = new google.maps.LatLng(latLng[0], latLng[1]);
        var posRounded = parseFloat(latLng[0]).toFixed(4) + "," + parseFloat(latLng[1]).toFixed(4);

        var mapOptions = {
          zoom: 13,
          center: new google.maps.LatLng(latLng[0], latLng[1]),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        var infowindowOptions = {
          map: map,
          position: pos,
          content: 'You are here: ' + posRounded
        };
        var markerOptions = {
          map: map,
          position: pos
        }

        infowindow = new google.maps.InfoWindow(infowindowOptions);
      }

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

    </script>
  </head>
  <body>
    <h2>Google Map</h2>
    <div id="map-canvas"></div>
    <div id="info" style="margin-top:20px;">
      <input class="lat-lng" type="text" placeholder="Enter lat lng here..."/>
      <button type="button" onclick="updateMarkerPosition()">Look it up!</button>
    </div>
  </body>
</html>

Answer 3

作为对偶然发现此问题的任何人的补充说明，我发现，如果在地图初始化之前无法使用LatLng，则具有'lat'和'lng'属性的普通对象也可以正常工作。

var myLatLng = {lat: -25.363, lng: 131.044}
gMap = new google.maps.Map(document.getElementById('map'), {
   center: myLatLng
});

未捕获的ReferenceError：未定义latLng

3 个答案: