如何解决反向地址解析代码
| 我一直在努力为Google地图中的反向地理编码整合Javavscript代码。我以为我已经解决了所有问题，但是仍然有问题。 当我将Javascript代码嵌入HTML文件中时，它可以正常工作。但是，如果我尝试运行javascript（进行了一些更改），则将其作为单独的文件运行，则地图会在打开表单时加载，但是当我输入纬度和经度坐标并按相关按钮进行反向地理编码时，所有发生的情况是刷新了地图。 我已经将HTML文件附加了嵌入的JS代码，然后附加了单独的JS代码文件进行比较。 带有嵌入式Javascript的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 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>
(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},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;
}
}
);
};
})();
解决方法
这是Khepri（谢谢！）代码的简短版本
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=\"https://maps.google.com/maps/api/js?sensor=false\"></script>
<!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>
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 },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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。