Обратный Код Геокодирование
Я работал над составлением кода 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) для вас.