Question

我知道我在问一个已经有很多答案的类似问题。但我无法找出问题的解决方案。在这里我使用的是Laravel 5.2，我试图从mysql数据库中获取latlng并在地图中显示。我正在使用Google Maps api v2。我的确切问题是我在控制台中获取了latlng值，但我无法在地图上显示它。在这里我附上完整的代码。任何帮助都会很棒。

这是我的MapController.php

class MapController extends Controller
{
public $type = 'Map';
public function getIndex()
{

   $location = DB::table('eventdata')->simplePaginate(500);
    return view('map.map')->with('location', $location);
}

这是我的map.blade.php

    <head>
    <meta charset="utf-8">
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByrgAtWpei65izUKYhdyr9-r54rrMZ8Zc&callback=initialize">
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="{{ asset('ico/opengts.png') }}">
    <title>Open GTS</title>

    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

    <div class="navbar-wrapper">
        <div class="container">

            <div class="navbar navbar-inverse navbar-static-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand active" href="#">Geo Punch Solution</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class=""><a href="{{ url('/') }}">Home</a></li>
                            <li class=""><a href="{{ url('aboutUs') }}">About Us</a></li>
                            <li class=""><a href="{{ url('accountAdmin') }}">Account Admin</a></li>
                            <li><a href="{{ url('userAdmin') }}">User Admin </a></li>

                            <li><a href="{{ url('vehicleAdmin') }}">Vehicle Admin </a></li>
                            <li><a href="{{ url('groupAdmin') }}">Group Admin </a></li>

                            <li><a href="{{ url('geozoneAdmin') }}">Geozone Admin </a></li>
                            <li><a href="{{ url('changePassword') }}">Change Password </a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <script>
                function initialize() {

                    var map = document.getElementById('map');

                    // Initialise the map
                    var map_options = {
                        center: location,
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    var maps = new google.maps.Map(map, map_options);

                    // Put all locations into array
                    var locations = [
                        @foreach ($location as $locations)
                        [ {{ $locations->latitude }}, {{ $locations->longitude }} ]
                        @endforeach
                        ];


                    for (i = 0; i < locations.length; i++) {
                        var location = new google.maps.LatLng(locations[i][0], locations[i][1]);

                        var marker = new google.maps.Marker({
                            position: location,
                            map: maps
                        });
                    }

                    // marker.setMap(map); // Probably not necessary since you set the map above

                }


                function handleLocationError(browserHasGeolocation, infoWindow, pos) {
                    infoWindow.setPosition(pos);
                    infoWindow.setContent(browserHasGeolocation ?
                            'Error: The Geolocation service failed.' :
                            'Error: Your browser doesn\'t support geolocation.');
                }
                {{--@endforeach--}}

            </script>

            <style type="text/css">
                #map {
                    width: 1170px;
                    height: 570px;
                    margin-top: 100px;
                    margin-left: 100px;
                }
            </style>
        </div>
    </div>
</head>
<body>

<div id="map"></div>
<p id="error"></p>
</body>

我收到如下错误。

未捕获的TypeError：无法读取属性＆＃39; 77.597639984451＆＃39;未定义的

请帮帮我.. 在此先感谢

注意：所有支架和标签都已正确关闭。

Answer 1

正如Matej已经指出的那样，你错过了数组元素之间的逗号。

var locations = [
    @foreach ($location as $locations)
    [ {{ $locations->latitude }}, {{ $locations->longitude }} ]
    @endforeach
];

这给你这个JS，它是无效的：

var locations = [
     [ 12.995250017848, 77.601860021241 ]
     [ 13.003339979332, 77.597639984451 ]
     [ 13.003339979332, 77.597639984451 ] 
];

您的代码应为：

var locations = [
    @foreach ($location as $locations)
    [ {{ $locations->latitude }}, {{ $locations->longitude }} ],
    @endforeach
];

然后会给你这个JS：

var locations = [
     [ 12.995250017848, 77.601860021241 ],
     [ 13.003339979332, 77.597639984451 ],
     [ 13.003339979332, 77.597639984451 ],
];

（最后一个元素的尾随逗号不是必需的，并且可能被任何JS代码linting工具标记为无效，否则不会导致任何问题。）

更新，这是一种使用现有位置至少为地图本身提供某种中心的简单方法。有更好的方法，例如使地图的边界适合所有位置，但你没有要求。

首先，创建您的位置数组。然后使用第一个设置地图的中心：

var locations = [
    @foreach ($location as $locations)
    [ {{ $locations->latitude }}, {{ $locations->longitude }} ],
    @endforeach
];

// Initialise the map
var map_options = {
    center: {lat: locations[0][0], lng: locations[0][1]},
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var maps = new google.maps.Map(map, map_options);

未捕获的TypeError：无法读取属性＆＃39; 77.597639984451＆＃39;未定义的

1 个答案: