谷歌地图和反向地理编码使用html5API

google maps and reverse geocoding using html5API?

本文关键字：编码 html5API 谷歌地图      更新时间：2024-06-01

为什么这样做：

        function initCoords() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(initialize, locationError);
  } else {
    showError("Your browser does not support Geolocation!");
  }
}
initCoords();
function locationError(){
  alert('"Your browser does not support Geolocation!"');
}
function initialize(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    var acc = position.coords.accuracy;
    geocoder = new google.maps.Geocoder();
    // Debugging
    console.log(position.coords);
    console.log("Accuracy: "+acc+"'nLatitude: "+lat+"'nLongitude: "+lon);
    var latlng = new google.maps.LatLng(lat,lon);
    // Google Maps API
    var myLatlng = new google.maps.LatLng(lat,lon);
    var mapOptions = {
        center: latlng,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
  function codeLatLng(position) {
   lat = position.coords.latitude;
    lon = position.coords.longitude;
    var latlng = new google.maps.LatLng(lat, lon);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          map.setZoom(11);
          marker = new google.maps.Marker({
              position: latlng,
              map: map
          });
          infowindow.setContent(results[1].formatted_address);
          infowindow.open(map, marker);
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
  codeLatLng();

总是返回这个：

Uncaught TypeError: Cannot read property 'coords' of undefined

在这条线上：

    function codeLatLng(position) {
   lat = position.coords.latitude;
    enter code here

它给我看的是地图，而不是带有地址的标记。。。我也尝试过：codeLatLng（位置）；

渲染谷歌地图后，我将对CodeLatLng（）的调用移动到Initialize（）函数中，并将位置参数传递给它。请参阅上面的评论。

<html>
<head>
 <script type="text/javascript"      src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script>
 function initCoords() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(initialize, locationError);
  } else {
    showError("Your browser does not support Geolocation!");
  }
}
initCoords();
function locationError(){
  alert('"Your browser does not support Geolocation!"');
}
function initialize(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    var acc = position.coords.accuracy;
    geocoder = new google.maps.Geocoder();
    // Debugging
    console.log(position.coords);
    console.log("Accuracy: "+acc+"'nLatitude: "+lat+"'nLongitude: "+lon);
    var latlng = new google.maps.LatLng(lat,lon);
    // Google Maps API
    var myLatlng = new google.maps.LatLng(lat,lon);
    var mapOptions = {
        center: latlng,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  codeLatLng( position );
}
  function codeLatLng(position) {
   lat = position.coords.latitude;
    lon = position.coords.longitude;
    var latlng = new google.maps.LatLng(lat, lon);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          map.setZoom(11);
          marker = new google.maps.Marker({
              position: latlng,
              map: map
          });
          infowindow.setContent(results[1].formatted_address);
          infowindow.open(map, marker);
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
 </script>
 </head>
  <body onload="">
  <div id="map_canvas" style="width: 400px; height: 400px;"></div>
  </body>
  </html>
相关文章：