Question

我知道这个问题似乎已经被问过了，但是我所看到的这些问题都无法回答我的问题，问题是从数据库获取经度和纬度数据时出现错误，并且无法在javascript部分的google map中显示标记，我可以正常地在视图中获取数据库（lan，lng），但是无法将它们作为标记打印在google map上，标记根本不显示，我想这是因为我把initMap（）中的所有脚本。现在我要做的就是在google map上显示我的数据库数据（lan，lng）作为标记。任何帮助将不胜感激。对不起我的英语不好

代码

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
<!--
      @foreach ($position as $location)

      <p>{{$location->lat}}</p>
      <p>{{$location->long}}</p>

      @endforeach
-->
    <!--The div element for the map -->
    <div id="map"></div>
    <script src="https://js.pusher.com/5.0/pusher.min.js"></script>

    <script>
        // Initialize and add the map
        function initMap() {
            // The location of Uluru
            var uluru = {lat: -25.344, lng: 131.036};
            // The map, centered at Uluru
            var map = new google.maps.Map(
            document.getElementById('map'), {zoom: 4, center: uluru});
            // The marker, positioned at Uluru
            //  var marker = new google.maps.Marker({position: uluru, map: map});

            // Enable pusher logging - don't include this in production
            Pusher.logToConsole = true;

            var pusher = new Pusher('5945d552dbd1e6bb3107', {
                cluster: 'ap2',
                forceTLS: true
            });

            var channel = pusher.subscribe('location');
            channel.bind("App\\Events\\SendLocation", function(data) {
                //        alert('An event was triggered with message: ' + data);
                var uluru = {lat: parseFloat(data.location.lat), lng: parseFloat(data.location.long)};

                var uluru= [
                    @foreach ($position as $location)
                        [  "{{ $location->lat }}", "{{ $location->long }}" ], 
                    @endforeach
                ];        

                var marker = new google.maps.Marker({position: uluru, map: map});
            });
        }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=my-api-key&callback=initMap"
    async defer></script>

  </body>
</html>

Answer 1

最终我解决了我的问题，我使用Ajax做到了，效果很好，

也以这种方式显示了如何将数据库数据（lat，lng）带到地图上并作为标记打印（不使用Ajax）。希望对其他人有所帮助：）

var uluru = {lat: -25.344, lng: 131.036};

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


  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});

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: map,
        }); 
    };

显示数据库数据（经纬度），并使用laravel

1 个答案: