显示数据库数据（纬度，经度）并使用 laravel 将它们打印为谷歌地图上的标记答案

【问题标题】：show database data(lat,long) and print them as markers on google map by using laravel显示数据库数据（纬度，经度）并使用 laravel 将它们打印为谷歌地图上的标记
【发布时间】：2020-02-03 23:33:23
【问题描述】：

我知道这个问题似乎以前被问过，但我看到的没有一个可以回答我的问题，问题是我从数据库中获取纬度和经度数据时出错并且不能在javascript部分的谷歌地图中显示标记，我可以正常在我的视图中获取我的数据库（lan，lng），但无法将它们打印为谷歌地图上的标记，标记根本不显示，我认为这是因为我把initMap() 中的所有脚本。现在我只想在谷歌地图上显示我的数据库数据（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>

【问题讨论】：

您已将“var uluru”定义为一个点，然后再次将其重新定义为点数组（因此您丢失了第一个值），这是错误的。然后将点数组传递给“new google.maps.Marker”，但是，您应该分别用每个点创建一个新标记。
没用，不过还是谢谢老哥的回复

标签： javascript php google-maps laravel-5 pusher

【解决方案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,
        }); 
    };

【讨论】：