Обратный Код Геокодирование

Я работал над составлением кода Javavscript для обратного геокодирования в Google maps. Я думал, что решил все проблемы, которые у меня были, но у меня все еще есть проблемы.

когда я вставляю код Javascript в HTML-файл, он работает без каких-либо проблем. Однако, если я попытаюсь запустить javascript (с некоторыми изменениями), как отдельный файл, карта загружается при открытии моей формы, но когда я ввожу координаты Lat и Lng и нажимаю соответствующую кнопку для обратного Геокодирование, все, что происходит, - это обновление карты.

я прикрепил HTML-файл с встраиванием кода JS, а затем отдельный файл кода JS, чтобы сделать сравнение.

HTML файл со встроенным Javascript

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Reverse Geocoding</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var infowindow = new google.maps.InfoWindow();
  var marker;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40.730885,-73.997383);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: 'roadmap'
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeLatLng() {

    var lat = document.getElementById('Latitude').value;
    var lng = document.getElementById('Longitude').value;

    var latlng = new google.maps.LatLng(lat, lng);
    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
          }); 
        var address= (results[1].formatted_address);
        document.getElementById('Address').value= results[1].formatted_address;
        infowindow.setContent(results[1].formatted_address);


          infowindow.open(map, marker);
        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
</script>
</head>
<body onLoad="initialize()">
<div>
  <input name="Latitude" type="text" id="Latitude" size="16" maxlength="10" />
  <input name="Longitude" type="text" id="Longitude" size="16" maxlength="10" />
  <input name="Address" type="text" id="Address" size="55" />
</div>
<div>
  <input type="button" value="Reverse Geocode" onClick="codeLatLng()">
</div>
<div id="map_canvas" style="height: 90%; top:60px; border: 1px solid black;"></div>
</body>
</html>

Код Javascript

(function ReverseGeocode() {

    //This is declaring the Global variables

    var geocoder, map, marker;

    //This is declaring the 'Geocoder' variable
    geocoder = new google.maps.Geocoder();

    window.onload = function() {

    //This is creating the map with the desired options 
        var myOptions = {
            zoom: 6,
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.ZOOM_PAN,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_LEFT
            }
            };

        map = new google.maps.Map(document.getElementById('map'), myOptions);
        var form = document.getElementById('SearchForLocationForm');

        //This is getting the 'Latitude' and 'Longtiude' co-ordinates from the associated text boxes on the HTML form
        var lat = document.getElementById('Latitude').value;
        var lng = document.getElementById('Longitude').value;

        //This is putting the 'Latitude' and 'Longitude' variables together to make the 'latlng' variable
        var latlng = new google.maps.LatLng(lat, lng);

        // This is making the Geocode request
        geocoder.geocode({'latLng': latlng}, function(results, status) {

        // This is checking to see if the Geoeode Status is OK before proceeding    
            if (status == google.maps.GeocoderStatus.OK) {

        //This is placing the marker at the returned address    
            if (results[1]) {
          // Creating a new marker and adding it to the map
            map.setZoom(16); 
          marker = new google.maps.Marker({
            map: map, draggable:true
          });
        }

        var address= (results[1].formatted_address);

        //This is placing the returned address in the 'Address' field on the HTML form  
        document.getElementById('Address').value= results[1].formatted_address;
                }
            }
);
    };
})();

2 ответов


Это короткая версия Хепри (спасибо!) Код

function getReverseGeocodingData(lat, lng) {
    var latlng = new google.maps.LatLng(lat, lng);
    // This is making the Geocode request
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status !== google.maps.GeocoderStatus.OK) {
            alert(status);
        }
        // This is checking to see if the Geoeode Status is OK before proceeding
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(results);
            var address = (results[0].formatted_address);
        }
    });
}

это также необходимо, не забывайте в голове:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Я взял то, что вы изменили, на то, что работает для меня...

HTML-код

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps JavaScript API v3 Example: Reverse Geocoding</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="/Scripts/test.js" type="text/javascript"></script>    
</head>
<body onload="ReverseGeocode.Init()">
    <div>
        <input name="Latitude" type="text" id="Latitude" size="16" maxlength="10" />
        <input name="Longitude" type="text" id="Longitude" size="16" maxlength="10" />
        <input name="Address" type="text" id="Address" size="55" />
    </div>
    <div>
        <input type="button" value="Reverse Geocode" onclick="ReverseGeocode.ReverseCode()">
    </div>
    <div id="map_canvas" style="height: 90%; top: 60px; border: 1px solid black;">
    </div>
</body>
</html>

это будет мой тест.код js ниже

var ReverseGeocode = function () {

    //This is declaring the Global variables

    var geocoder, map, marker;

    //This is declaring the 'Geocoder' variable
    geocoder = new google.maps.Geocoder();

    function GeoCode(latlng) {

        // This is making the Geocode request
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {

            if(status !== google.maps.GeocoderStatus.OK)
            {
                alert(status);
            }
            // This is checking to see if the Geoeode Status is OK before proceeding    
            if (status == google.maps.GeocoderStatus.OK) {

                //This is placing the marker at the returned address    
                if (results[0]) {
                    // Creating a new marker and adding it to the map
                    map.setZoom(16);
                    marker = new google.maps.Marker({
                        map: map, draggable: true
                    });
                    marker.setPosition(latlng);
                    map.panTo(latlng);
                }

                var address = (results[0].formatted_address);

                //This is placing the returned address in the 'Address' field on the HTML form  
                document.getElementById('Address').value = results[0].formatted_address;
            }
        });

    }

    return {

        Init: function () {

            //This is putting the 'Latitude' and 'Longitude' variables 
                            //together to make the 'latlng' variable
            //var latlng = new google.maps.LatLng(lat, lng);
            var latlng = new google.maps.LatLng(40.730885, -73.997383);

            //This is creating the map with the desired options 
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: 'roadmap'
            }

            map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

            GeoCode(latlng);
        },

        ReverseCode: function () {

            //This is getting the 'Latitude' and 'Longtiude' co-ordinates from the associated text boxes on the HTML form
            var lat = document.getElementById('Latitude').value;
            var lng = document.getElementById('Longitude').value;

            var latlng = new google.maps.LatLng(lat, lng);

            GeoCode(latlng);

        }
    };

} ();             // the parens here cause the anonymous function to execute and return

Я в основном заменены окна.обработчик onload, который вы использовали, и настройте "объект" с событием init, которое изначально настраивает карту. Затем я просто выставил функцию, которая захватывает пользователя, введенного lat / lng, и вызвал нашу обертку геокода.

должно работать с небольшим изменением (вне обильного количества обработки ошибок, которые я пропустил : - p) для вас.