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

【问题标题】：How can I add json data into an array that are comprised of lngs and lats?如何将 json 数据添加到由 longs 和 lats 组成的数组中？
【发布时间】：2017-03-19 17:23:32
【问题描述】：

我是编程初学者。我正在建立一个网站，该网站将从数据库中检索经度和纬度。然后它将在谷歌地图上显示点，然后它将在点之间路由。但我无法将 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>

【问题讨论】：

你遇到了什么错误？
它说 Uncaught TypeError: Cannot read property 'lat' of undefined

标签： javascript php mysql json maps

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您遇到的错误 (Uncaught TypeError: Cannot read property 'lat' of undefined) 表明您在尝试使用 lat 属性时没有得到预期的结果。

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

您还可以访问setRoute() 中的lat 属性。请注意，setRoute() 在数据从服务器返回之前被执行，因此latLngs 仍然是一个空数组。 $.ajax 回调将在未来某个时间点执行，当您的服务器响应时（即使它很快，对于 JavaScript，也就是“稍后”）。与此同时，你的 JavaScript 的其余部分继续执行，setRoute() 尝试从 latLngs[0] 读取，但 latLngs 中还没有任何内容。

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

【讨论】：