javascript - 未捕获的 ReferenceError：未定义 latLng

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>

谢谢

score 2 · Accepted Answer

我想你一定忘了初始化你的地图。我在这里修好了你的小提琴。 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(', ');
}

score 0 · Accepted Answer

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

“geocodePosition”函数未定义。
“updateMarkerPosition”函数并不完全正确，因此即使您将 lat lng 值传递给该函数（例如“updateMarkerPosition(-27.3959,153.0626)”，它也不会正确显示。这是因为没有属性“lat”和“lng”代表纬度。
“updateMarkerPosition”函数不会更新地图或对地图做任何事情。

不确定这是否是您要查找的内容，但这是一个快速而肮脏的示例，谷歌地图会在加载时获取您当前的位置并显示您的位置坐标。然后，您可以在文本框中指定坐标（格式为：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>

score 0 · Accepted Answer

正如任何偶然发现这个问题的人的旁注一样，我发现如果在地图初始化之前 LatLng 不可用，则具有“lat”和“lng”属性的普通对象也可以正常工作。

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

javascript - 未捕获的 ReferenceError：未定义 latLng

3 回答 3

Related

Reference