php代码调用javascript函数返回函数没有定义

代码下面试图要求用户上传kml文件，然后保存该文件，同时它显示谷歌地图中的kml数据使用谷歌地图API v2。我可以成功地将kml文件保存到一个特定的目录中，但是在用户点击KML TEST按钮后，我立即在谷歌地图上显示文件时遇到了一些问题。该错误是未捕获的ReferenceError：showKML没有定义php代码调用javascript函数返回函数没有定义

下面是我用

<!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&amp;v=2&amp;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>

您的援助表示高度赞赏

来源

2012-02-13 Omran

你应该有一个很好的理由（你没有），以呼应文本直属''。 – 2012-02-13 11:23:32

JavaScript <script>块以块为单位进行评估。

在同一个块中，函数可以在定义之前调用，因为函数声明是在代码的其余部分之前求值的。

但是，当您将function showKML(){}移动到不同的块时，函数将在其定义之前调用，因此会导致错误。

要解决该问题，必须在调用showKML的<?php .. ?>块之前移动函数声明。

甲的jsfiddle来演示该问题：http://jsfiddle.net/SGbfu/1/

更多的相关详细说明：

当遇到<script>和</script>之间的代码直接评估。
首先评估使用function x(){}声明的所有功能。然后，考虑其余的代码。
重复步骤1-2，直到评估文档中的所有<script>块为止。

例子：

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

来源

2012-02-13 11:13:12

thnaks很多，但你可以解释更多的细节 – Omran 2012-02-13 11:16:51

@Omran更新回答。详细解释请参阅 – 2012-02-13 11:22:30

+1 – Kaii 2012-02-13 11:53:47

你需要用函数定义移动<script>的代码块到顶部。当你调用功能showKML()其尚未定义。您应该将showKML()绑定到文档就绪事件。（例如，将函数调用放入已在页面加载事件中调用的initialize()函数中）

此外，我建议您将javascript代码定义移至外部文件并包含它，就像您包含Google Maps API一样 - 避免每次刷新页面时加载代码，并减少流量和页面加载。

来源

2012-02-13 11:12:14 Kaii

谢谢凯伊，我怎样才能将'showKML（）'绑定到文档准备好的事件，我可以从你那里得到更多的想法，因为我退出新程序员 – Omran 2012-02-13 11:20:14

我已经在我的答案中提到过。只需移动您的PHP代码，以便showKML（）函数的'echo'位于已经绑定到'事件的'function initialize（）'中。 – Kaii 2012-02-13 11:52:33

php代码调用javascript函数返回函数没有定义

回答

相关问题