Code de géocodage inverse

J'ai travaillé sur la mise au Javavscript code pour le Géocodage Inversé dans Google maps. Je pensais avoir résolu toutes les questions que j'avais, mais je suis toujours avoir des problèmes.

Quand j'ai intégrer le code Javascript dans le fichier HTML, il fonctionne sans aucun problème. Cependant, si j'essaie de l'exécuter le javascript (avec quelques modifications), dans un fichier séparé, la carte des charges lors de l'ouverture de mon formulaire, mais quand je rentre la Lat, Lng coordonnées et appuyez sur la touche correspondante pour Géocodage Inversé, tout ce qui se passe, c'est que la carte est actualisée.

J'ai joint le fichier HTML avec le code JS incorporer et puis la séparer du code JS fichiers, pour faire une comparaison.

Fichier HTML avec Javascript intégré

<!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>

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

source d'informationauteur IRHM

C'est la version courte de Khepri (merci!) Code

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

cela est également nécessaire, de ne pas oublier dans la tête:

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

J'ai pris ce que vous avez eu un modifié pour quelque chose qui fonctionne pour moi...

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>

Ce serait mon test.js le code ci-dessous

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

En gros, j'ai remplacé la fenêtre.gestionnaire onload que vous avez utilisé et mis en place le "objet" avec un événement init qui met en place la carte au départ. Ensuite, j'ai juste exposé une fonction qui attrape l'utilisateur a entré lat/lng et a appelé à notre géocodage wrapper.

Devrait fonctionner avec peu de modification (à l'extérieur de grandes quantités d'erreur de manipulation que j'ai raté :-p ) pour vous.

Vous devez vous connecter pour publier un commentaire.