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函數返回函數沒有定義

回答

相關問題