问题描述
|
我一直在努力为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;
}
}
);
};
})();
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）