Построение нескольких точек на картах Google, выборка координат из базы данных

Question

Я работаю над проектом laravel, где каждый вводит школьные координаты, и они наносятся на карты Google. Я могу получить координаты через контроллер, но проблема заключается в нанесении их на карту.

Вот мой код контроллера для получения координат:

public function map_points(){
    $points = DB::table('school_entries')
                    ->select('longitude', 'latitude')
                    ->get();
    $point = array();
    foreach ($points as $value) {
        $point[] = "{latlong: \"$value->latitude,$value->longitude\"}";
    }
    return json_encode($point);
}

Вот мои json результаты построения точек:

["{latlong: "30.5350077,-2.161562"}", "{latlong: "30.5480003,-2.0803146"}", "{latlong: "30.0738499,-2.1401087"}", "{latlong: "29.7041765,-2.6116944"}"]

Вот мой блок кода javascript / ajax для построения точек.

    $(document).ready(function() {
            $.ajax({
                url: '/map-points',
                type: 'GET',
                dataType: 'json',
                success: function( data ){
                console.log(data);
                var property_list = [data],
                options = {
                    zoom: 8,
                    center: new google.maps.LatLng( -2.08, 30.54 ),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    },
                    map = new google.maps.Map( 
                        document.getElementById( 'map-canvas' ), 
                        options 
                    );
                    for( var index = 0; index < property_list.length; index++ ) {
                        var latlong = property_list[index]['latlong'].split(','),
                            latlng = new google.maps.LatLng( latlong[0], latlong[1] ),
                            marker = new google.maps.Marker( {position: latlng, map: map} );
                        marker.setMap( map );
                    };
                },
                error: function(){
                    output.text('There was an error loading the data.');
                }
            }); 
        });

Что может быть не так с моим кодом, он не отображает точки?

Answer 1

Я решил это, просто выбрав данные из контроллера как есть (поскольку laravel возвращает json-объекты), как показано ниже:

public function map_points(){
    $points = SchoolEntry::select('longitude', 'latitude')->get();
    return json_encode($points);
}

и в моем javascript пришлось сделать следующее для построения графикаточка

var property_list = data,
options = {
   zoom: 8,center: new google.maps.LatLng( -2.08, 30.54 ),mapTypeId: google.maps.MapTypeId.ROADMAP },
   map = new google.maps.Map(document.getElementById( 'map-canvas' ),options);

   for( var index = 0; index < property_list.length; index++ ) {
        console.log(property_list[index]);
        var latlong = property_list[index],
        latlng = new google.maps.LatLng( latlong.longitude, latlong.latitude ),
        marker = new google.maps.Marker( {position: latlng, map: map} );
        marker.setMap( map );
   };

Вышеуказанные точки отлично отрисованы.

Answer 2

PHP-код для генерации данных координат кажется немного сложным - я уверен, что вы могли бы упростить его следующим образом

$point = array();
foreach ($points as $value) {
    $point[] = [
        'lat'=>$value->latitude,
        'lng'=>$value->longitude
    ];
}
return json_encode( $point );

, а затем измените обратный вызов javascript

for( var n in property_list ){
    obj = property_list[n];
    latlng = new google.maps.LatLng( obj.lat, obj.lng );
    marker = new google.maps.Marker( { position: latlng, map: map } );
}

Итак: я взял ваш базовый код и предложенную модификацию, чтобы проверить, почему вы получаете ошибку. Я собрал следующее демо, которое правильно отображает маркеры на карте. Вам нужно будет оправдать тот факт, что он основан на другой базе данных без кода Laravel - важным битом является javascript, который обрабатывает данные ответа. Я надеюсь, что это поможет решить вашу проблему.

<?php

    error_reporting( E_ALL );
    ini_set( 'display_errors', 1 );

    if( $_SERVER['REQUEST_METHOD']=='GET' && !empty( $_GET['action'] ) && $_GET['action']='fetch-coordinates' ){
        ob_clean();

        /* emulate the remote script */
        $dbport =   3306;
        $dbhost =   'localhost';
        $dbuser =   'root';
        $dbpwd  =   'xxx';
        $dbname =   'xxx';

        $db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );      
        $sql= 'select `lat`,`lng` from `maps`';

        $res=$db->query( $sql );

        $data=[];
        while( $row=$res->fetch_object() ){
            $data[]=[
                'lat'=>$row->lat,
                'lng'=>$row->lng
            ];
        }

        http_response_code( 200 );
        header('Content-Type: application/json');
        exit( json_encode( $data ) );
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <script src='//code.jquery.com/jquery-latest.js'></script>
        <title>jQuery: Fetch data from db for Google Maps</title>
        <style>
            #map-canvas{width:80%;height:80vh;float:none;margin:auto;border:1px solid black;}
        </style>
        <script>
            $( document ).ready(function() {
                $.ajax({
                    url: '/map-points',
                    type: 'GET',
                    dataType: 'json',
                    data:{ action:'fetch-coordinates' },
                    success: function( data ){
                        var options = {
                            zoom: 8,
                            center: new google.maps.LatLng( -2.08, 30.54 ),
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        var map = new google.maps.Map( document.getElementById( 'map-canvas' ), options );

                        for( var n in data ){
                            var obj = data[ n ];
                            var latlng = new google.maps.LatLng( obj.lat, obj.lng );
                            var marker = new google.maps.Marker( { position: latlng, map: map } );
                        }
                    },
                    error: function(e){
                        output.text('There was an error loading the data.');
                    }
                }); 
            });
        </script>
        <script src='//maps.googleapis.com/maps/api/js?key=xxxxoFYApo9VMdJzE04tAxxxx'></script>
    </head>
    <body>
        <div id='map-canvas'></div>
    </body>
</html>