Kod odwrotnego geokodowania

Pracowałem nad połączeniem kodu Javavscript do odwrotnego geokodowania na mapach Google. Myślałem, że rozwiązałem wszystkie problemy, które miałem, ale nadal mam problemy.Kod odwrotnego geokodowania

Po osadzeniu kodu JavaScript w pliku HTML działa on bez żadnych problemów. Jednak jeśli spróbuję uruchomić javascript (z pewnymi zmianami), jako osobny plik, mapa ładuje się po otwarciu mojego formularza, ale kiedy wchodzę w współrzędne Lat i Lng i naciskam odpowiedni przycisk na Reverse Geocode, wszystko to dzieje się jest to, że mapa jest odświeżana.

Dołączyłem plik HTML z osadzonym kodem JS, a następnie oddzielny plik kodu JS, aby dokonać porównania.

plik HTML z wbudowanymi 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>

kod 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; 
       } 
      } 
); 
    }; 
})();

Źródło

2011-06-25 IRHM

Jest to skrócona wersja (dziękuję!) Kodeksu khepri za

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); 
     } 
    }); 
}

jest to potrzebne również, nie zapomnij w głowie:

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

Źródło

2013-05-04 01:39:13 slaver113

Wziąłem co miałeś zmodyfikowano go do czegoś, co działa dla mnie ...

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>

Byłby to mój kod test.js poniżej

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

I w zasadzie zastąpił obsługi window.onload zostałeś użyciu i skonfigurować „obiekt” ze zdarzeniem init tworzy mapę początkowo. Następnie ujawniłem funkcję, która łapie użytkownika wprowadzonego lat/lng i wzywana do naszego opakowania geokodowania.

Powinien działać z niewielkimi modyfikacjami (poza obfitymi ilościami obsługi błędów, które pominąłem: -p).

Źródło

2011-06-25 17:32:15 Khepri

Cześć, szczere dzięki za odpowiedź, a kod. Wypróbowałem to i niestety nie mogę się wydostać, gdy kliknę przycisk "Odwróć geocode". Masz jakieś pomysły? AKTUALIZACJA - Udało mi się to sprawić, był to tylko brakujący średnik. Wielkie dzięki za Twoją pomoc. Z pozdrowieniami – IRHM

Przesłałem powyższy przykład dla Ciebie. http://www.guilette.net/Example.zip Wystarczy wypakować i uruchomić, a to zadziała. (FYI, to moja prywatna domena. Jeśli nie masz ochoty pobrać pliku z tego miejsca, daj mi znać, a ja ustawię plik tam, gdzie wolisz) EDYCJA: Cieszę się, że to działa! – Khepri

Kod odwrotnego geokodowania

Odpowiedz

Powiązane problemy