下面的代码试图要求用户上传 kml 文件，然后保存该文件，同时它使用 google maps api v2 在 google maps 中显示 kml 数据。我可以成功获取 kml 文件并将其保存在特定目录中，但是，我在用户单击 KML TEST 按钮后立即在谷歌地图上显示文件时遇到了一些问题。错误是Uncaught ReferenceError: showKML is not defined
这是我使用的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Find latitude and longitude with Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAgrj58PbXr2YriiRDqbnL1RSqrCjdkglBijPNIIYrqkVvD1R4QxRl47Yh2D_0C1l5KXQJGrbkSDvXFA"
type="text/javascript"></script>
<?php
$upload = $_SERVER['PHP_SELF'];
if(isset($_POST['kmltest'])) {
$target_path = "uploads/";
$fn = basename( $_FILES['uploadedfile']['name']);
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
//echo $target_path ;
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded";
echo "<script type=\"text/javascript\"> showKML(); </script>";
}
else{
echo "There was an error uploading the file, please try again!";
}
}
?>
<script src="egeoxml.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
var options = {};
var shapeCounter_ = 0;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(25.22903, 55.46612), 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.clearOverlays();
document.getElementById("lat").value = "25.22903";
document.getElementById("lng").value = "55.46612";
}
}
function startShape() {
initialize();
document.getElementById('lat').disabled = true;
document.getElementById('lng').disabled = true;
var polygon = new GPolygon([],"ff0000", 2, 0.7,"ff0000",0.2);
startDrawing(polygon, "Shape " + (++shapeCounter_), function() {
var cell = this;
var area = polygon.getArea();
cell.innerHTML = (Math.round(area / 10000) / 100) + "km<sup>2</sup>";
});
showcoor(polygon);
}
function startDrawing(poly, name, onUpdate) {
map.addOverlay(poly);
poly.enableDrawing(options);
poly.enableEditing({onEvent: "mouseover"});
poly.disableEditing({onEvent: "mouseout"});
GEvent.addListener(poly, "endline", function() {
GEvent.addListener(poly, "click", function(latlng, index) {
if (typeof index == "number") {
poly.deleteVertex(index);
}
});
});
}
function showcoor (poly) {
GEvent.addListener(poly, "endline", function() {
GEvent.addListener(poly, "click", function() {
var str= "" ;
for (var i = 0, I = this.getVertexCount(); i < I; ++i) {
var xy = this.getVertex(i);
str += xy.lat() + ', ' + xy.lng() + '<br />';
}
alert (str);
});
});
}
function drawpoint() {
//initialize();
document.getElementById('lat').disabled = false;
document.getElementById('lng').disabled = false;
var lat = document.getElementById('lat').value;
var lng = document.getElementById('lng').value;
var center = new GLatLng(parseFloat(lat), parseFloat (lng));
map.setCenter(center, 7);
geocoder = new GClientGeocoder();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("lat").value = center.lat().toFixed(5);
document.getElementById("lng").value = center.lat().toFixed(5);
});
GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").value = center.lat().toFixed(5);
document.getElementById("lng").value = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function() {
var point =marker.getPoint();
map.panTo(point);
document.getElementById("lat").value = point.lat().toFixed(5);
document.getElementById("lng").value = point.lng().toFixed(5);
});
});
}
function showKML() {
//alert(filename);
initialize();
document.getElementById('lat').disabled = true;
document.getElementById('lng').disabled = true;
var exml;
exml = new EGeoXml("exml", map, ("uploads/test.kml"));
exml.parse();
exml.show();
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" >
<form action = <?php echo $upload; ?> method = "post" enctype="multipart/form-data"/>
<p align="left">
<table>
<tr>
<td><b>Latitude</b></td>
<td><b>Longitude</b></td>
</tr>
<tr>
<td>
<input type="text" name="lat" id="lat" /></td>
<td>
<input type="text" name="lng" id="lng" /></td>
<td>
<input type="button" name="point" id="point" value="Point" onclick="drawpoint()" /><td>
<input type="button" name="shape_b" id="shape_b" value="Poly" onclick="startShape()" /><td>
<input type="submit" name="kmltest" id="kmltest" value="KML TEST" /> </td></tr>
<tr>
<td>
<input type="file" name="uploadedfile" id="uploadedfile" />
</td>
</tr>
</table>
</p>
<p>
<div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
</p>
<script type="text/javascript">
//<![CDATA[
if (typeof _gstat != "undefined") _gstat.audience('','pagesperso-orange.fr');
//]]>
</script>
</form>
</body>
</html>
非常感谢您的协助
最佳答案
JavaScript <script> block 以 block 为单位进行评估。
在同一个 block 中，函数可以在定义之前被调用，因为函数声明在代码的其余部分之前被求值。
然而，当你移动function showKML(){}到另一个 block ，该函数在定义之前被调用，因此出现错误。
要解决这个问题，你必须把函数声明移到<?php .. ?>之前。 block ，其中 showKML被称为。
演示问题的 JSFiddle:http://jsfiddle.net/SGbfu/1/
更详细的解释:
- 何时
<script>和</script>遇到，直接求值之间的代码。 - 所有函数，使用
function x(){}声明首先被评估。然后，考虑其余代码。 - 重复步骤 1-2，直到所有
<script>评估文档中的 block 。
例子:
<script>
f(); // No error, f is declared below
function f(){ alert('f() called'); }
g(); // Error: g is not defined before, or within this block
</script>
<script>
function g(){}
</script>
关于调用javascript函数的php代码返回函数未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9259398/