php代码调用javascript函数返回函数未定义答案

【问题标题】：php code to call javascript function returns function is not definedphp代码调用javascript函数返回函数未定义
【发布时间】：2012-02-13 11:05:40
【问题描述】：

下面的代码尝试要求用户上传 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&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>

非常感谢您的帮助

【问题讨论】：

你应该有一个很好的理由（你没有）直接在<head>下回显文本。

标签： php javascript google-maps-api-2

【解决方案1】：

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>

【讨论】：

问了很多，但你能详细解释一下吗
这很奇怪，即使我将函数声明块移到调用脚本块（由 PHP 生成）之前，我也会得到 function undefined

【解决方案2】：

您需要将带有函数定义的<script> 块移到顶部。在您调用函数showKML() 时，它尚未定义。您应该将showKML() 绑定到文档就绪事件。（例如，将函数调用放在已在页面加载事件中调用的 initialize() 函数中）

另外，我建议您将 javascript 代码定义移动到外部文件并像包含 google maps API 一样包含它 - 这样可以避免在每次页面刷新时加载代码并减少流量和页面负载。

【讨论】：

谢谢 Kaii，我怎样才能将 'showKML()' 绑定到文档就绪事件，我可以从你那里得到更多的想法，因为我退出了新程序员
我已经在回答中提到了这一点。只需移动您的 PHP 代码，以便 showKML() 函数的 echo 位于您的 function initialize() 中，该函数已绑定到 <body onload=""> 事件。