PHP-код для вызова функции JavaScript возвращается функция не определена - PullRequest
Новая
       0

PHP-код для вызова функции JavaScript возвращается функция не определена

3 голосов
/ 13 февраля 2012

Код ниже пытается попросить пользователя загрузить файл kml, а затем сохраняет файл, в то же время показывая данные kml в картах Google с помощью google maps api v2. Я мог успешно взять файл kml и сохранить его в определенном каталоге, ОДНАКО, я столкнулся с некоторой проблемой при отображении файла на картах Google сразу после того, как пользователь нажал кнопку KML TEST. Ошибка: Uncaught ReferenceError: showKML не определен

Вот код, который я использовал 

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

Ваша помощь высоко ценится

Ответы [ 2 ]

4 голосов
/ 13 февраля 2012

JavaScript <script> блоки оцениваются в блоках.

Внутри того же блока функцию можно вызывать до ее определения, поскольку объявления функций оцениваются до остальной части кода.

Однако, когда вы перемещаете function showKML(){} в другой блок, функция вызывается до того, как она определена, поэтому возникает ошибка.

Чтобы решить проблему, вы должны переместить объявление функции перед блоком <?php .. ?>где showKML вызывается.

JSFiddle для демонстрации проблемы: http://jsfiddle.net/SGbfu/1/ Более подробное объяснение:

  1. Когда встречаются <script> и </script>, непосредственно проверяется код между ними.
  2. Все функции, объявленные с использованием function x(){} оцениваются первымиЗатем рассматривается оставшаяся часть кода.
  3. Повторяется шаг 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>
4 голосов
/ 13 февраля 2012

вам нужно переместить блок <script> с определениями функций вверх.В тот момент, когда вы вызываете функцию showKML(), она еще не определена.Вы должны связать showKML() с событием готовности документа.(например, поместите вызов функции в вашу initialize() функцию, которая уже вызывается в событии загрузки страницы)

Также я предлагаю вам переместить определение кода javascript во внешний файл и включить его так же, как вы включаете GoogleAPI карт - это позволяет избежать загрузки кода при каждом обновлении страницы и снижает трафик и загрузку страницы.

...