Question

我正在开发一个网站，我正在尝试显示用户位置与坐标取自数据库的特定位置之间的距离。我正在使用php从数据库中检索值并调用javascript函数来计算用户位置与从db检索的坐标之间的距离。虽然功能正常，但我得到了不可预知的结果。也就是说，如果使用10个不同的坐标调用距离函数10次，则仅针对某些调用显示结果。而且没有具体的模式。也就是说，在第一次运行时没有显示结果的一组坐标，在第二次运行时显示距离。而每次都在继续混乱。我怀疑问题是什么。

这是我的代码：

<script>
var latLngA;
function getLocation(coordinates,call_number) {
    //alert("Entering with coordinates " + coordinates + " and call number " + call_number);
    navigator.geolocation.getCurrentPosition(
        function(position) {
            if(call_number == 0){
                latLngA = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
            }   
            var latlong = coordinates.split(",");
            var latLngB = new google.maps.LatLng(parseFloat(latlong[0]), parseFloat(latlong[1]));
            var distance = google.maps.geometry.spherical.computeDistanceBetween(latLngA, latLngB);
            distance = (distance/1000).toFixed(2);
            var table = document.getElementById('venue_list');
            var tbody = table.getElementsByTagName('tbody')[0];
            var rows = tbody.getElementsByTagName('tr');
            //alert(distance);
            rows[call_number].getElementsByTagName('td')[3].innerHTML = distance;
        },
        function() {
            alert("Geo-location not supported!");
        }
    );
</script>
<?php
$i=0;
while($row = mysqli_fetch_array($result))
                    {
                        $name = $row['NAME'];
                        $img = $row['IMAGE_SRC'];
                        $addr = $row['ADDRESS'];
                        $location = $row['LOCATION'];
                        $coordinates = $row['COORDINATES'];

                        echo "<script type='text/javascript'>map_function('{$addr}','{$name}','{$img}','{$i}');</script>";
                    ?>
                        <tr>
                            <td>
                                    <img src="<?php echo $img.".jpg"?>" height="100" width="100">
                            </td>
                            <td>
                                    <?php echo $name?>
                            </td>
                            <td style="display:none;">
                                    <?php echo $location?>
                            </td>
                            <td>
                                    <?php echo "<script type='text/javascript'>getLocation('{$coordinates}','{$i}');</script>";?>
                            </td>
                        </tr>                       
                    <?php
                        $i=$i+1;
                    }
?>

我对javascript相对较新，因此无法理解出现了什么问题。期待一个解决方案。感谢。

Answer 1

由于getCurrentPosition()函数的异步性质，您遇到此问题。碰巧变量latLngA可能未定义，因为getCurrentPosition()未在您期望的序列中调用。

使用一些调试消息可以看出这一点。这是我用5个坐标循环得到的消息序列：

getLocation ... 
call_number: 0 
coordinates: 45,13 
getLocation ... 
call_number: 1 
coordinates: 45.5,13.5 
getLocation ... 
call_number: 2 
coordinates: 46,14 
getLocation ... 
call_number: 3 
coordinates: 46.5,14.5 
getLocation ... 
call_number: 4 
coordinates: 47,15

这是调用getCurrentPosition()的顺序（完全不按顺序）：

getCurrentPosition call_number: 3 
["46.5", "14.5"] 
latLngA: undefined 
latLngB: (46.5, 14.5) 
Uncaught TypeError: Cannot read property 'k' of undefined %7Bmain,geometry%7D.js:14

getCurrentPosition call_number: 1 
["45.5", "13.5"] 
latLngA: undefined 
latLngB: (45.5, 13.5) 
Uncaught TypeError: Cannot read property 'k' of undefined %7Bmain,geometry%7D.js:14

getCurrentPosition call_number: 4 
["47", "15"] 
latLngA: undefined 
latLngB: (47, 15) 
Uncaught TypeError: Cannot read property 'k' of undefined %7Bmain,geometry%7D.js:14

getCurrentPosition call_number: 0 
O {k: 45.548058999999995, A: 13.730187999999998, toString: function, j: function, equals: function…}
 22369562-php-coordinates.html:36
["45", "13"] 
latLngA: (45.548058999999995, 13.730187999999998) 
latLngB: (45, 13) 
distance: 83.63 

getCurrentPosition call_number: 2 
["46", "14"] 
latLngA: (45.548058999999995, 13.730187999999998) 
latLngB: (46, 14) 
distance: 54.50

因此，解决方案是首先更改代码以获取起始位置latLngA，然后开始循环。

Javascript函数表现不可预测

1 个答案: