Question

我是编程的初学者。我正在建立一个网站，将从数据库中检索经度和纬度。然后它将在谷歌地图上显示点然后它将在点之间路由。但我无法将json数据存储在数组中。我遇到了不同的错误。

这是我的代码。

<?php
    if( $_SERVER['REQUEST_METHOD']=='GET' && isset( $_GET['ajax'] ) ){

        $dbhost =   'localhost';
        $dbuser =   'id1111790_root'; 
        $dbpwd  =   '12345678'; 
        $dbname =   'id1111790_longlat';
        $db     =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );

        $places=array();

        $sql    =   'select 
                        `location_name` as \'name\',
                        `location_Latitude` as \'lat\',
                        `location_Longitude` as \'lng\'
                        from `maps`
                        limit 100';

        $res    =   $db->query( $sql );
        if( $res ) 
            while( $rs=$res->fetch_object() ) 
                $places[]=array( 'latitude'=>$rs->lat, 'longitude'=>$rs->lng, 'name'=>$rs->name );

        $db->close();

        header( 'Content-Type: application/json' );
        echo json_encode( $places,JSON_FORCE_OBJECT );
        exit();
    }
?>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyAaWYmMhckn2kI5t-1bM9XkQsg0QxrozWc' type='text/javascript'></script>
<script type="text/javascript">

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var getacara=0; 
var latLngs = [];
var bounds;
//var latLngs = [];
function load() {
    directionsDisplay = new google.maps.DirectionsRenderer();

    var center = new google.maps.LatLng(-33.9, 151.2);
    var mapOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: center
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    setRoute();
    directionsDisplay.setMap(map);

                $.ajax({

                url: document.location.href,/*'phpmobile/getlanglong.php'*/
                data: { 'id': getacara, 'ajax':true },
                dataType: 'json',
                success: function( data, status ){
                    $.each( data, function( i,item ){

                        latLngs.push(new google.maps.LatLng(data[i].lat,data[i].lng));

                    });
                },
                error: function(){
                    output.text('There was an error loading the data.');
                }
            }); 



}

function setRoute() {
    var start = latLngs[0].lat + ',' + latLngs[0].lng;
    var end = latLngs[latLngs.length - 1].lat + ',' + latLngs[latLngs.length - 1].lng;

    var waypts = [];
    for (var i = 1; i < latLngs.length - 1; i++) {
        waypts.push({
            location: latLngs[i].lat + ',' + latLngs[i].lng,
            stopover: true
        });
    }
    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });


}

 document.addEventListener( 'DOMContentLoaded', load, false );
</script>
<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map-canvas, #map_canvas {
    height: 80%;
}
@media print {
    html, body {
        height: auto;
    }
    #map-canvas, #map_canvas {
        height: 650px;
    }
}
#panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
}
</style
</head>
<body>

<div id="map-canvas"></div>

</body>
</html>

Answer 1

您告诉JSON_ENCODE强制所有内容都成为一个对象，因此您在$places内创建的数组现在将成为对象。因此，将您收到的数据作为对象进行处理。

success: function( data, status ){
    $.each( data, function( i,item ){

        latLngs.push(
            new google.maps.LatLng(item.lat,item.lng)
        );
    });
},

Answer 2

您获得的错误（Uncaught TypeError: Cannot read property 'lat' of undefined）表明您在尝试使用lat财产时未达到预期效果。

检查data[i]回调中的$.ajax变量是否具有正确的值。如果不存在data，则可能意味着您没有正确地从PHP代码返回数据，或者数据库无法访问，或者它是空的。

您还访问lat中的setRoute()媒体资源。请注意，{<1}}在数据从服务器返回之前执行，因此setRoute()仍为空数组。 latLngs回调将在未来的某个时刻执行，当您的服务器响应时（即使它很快，对于JavaScript，即＆＃34;稍后＆＃34;）。与此同时，JavaScript的其余部分仍在执行，$.ajax尝试从setRoute()读取，但latLngs[0]尚未包含任何内容。

我建议您阅读有关JavaScript承诺和延迟执行的内容，这可能有助于清除这种混淆。您可能还想阅读有关JavaScript事件循环的信息，这将有助于您了解为什么某些操作将在未来被执行。

如何将json数据添加到由lng和lats组成的数组中？

2 个答案: