显示数据库数据（纬度、经度）并使用 laravel 在 google 地图上将它们打印为标记

Question

我知道这个问题好像以前有人问过，但是 none 我看到的可以回答我的问题，问题是我在获取纬度和经度数据时出错来自数据库并且无法在 javascript 部分的 google 地图中显示标记，我可以在我的视图中正常获取我的数据库（lan，lng），但无法将它们打印为 [=17= 上的标记] 地图，标记根本不显示，我认为这是因为我将所有脚本放在 initMap() 中。现在我只想在 google 地图上显示我的数据库数据 (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 做到了并且效果很好，

这种方式还展示了如何获取数据库数据（纬度、经度）并将它们作为标记打印在地图上（不使用 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 在 google 地图上将它们打印为标记

show database data(lat,long) and print them as markers on google map by using laravel

javascript

php

google-maps

pusher

laravel-5