показать данные базы данных (широта, долгота) и распечатать их в виде маркеров на карте Google с помощью laravel - PullRequest
Новая
       10

показать данные базы данных (широта, долгота) и распечатать их в виде маркеров на карте Google с помощью laravel

0 голосов
/ 06 октября 2019

Я знаю, что этот вопрос, кажется, был задан ранее, но ни один из них, как я видел, не смог ответить на мою проблему, проблема в том, что у меня ошибка при получении данных о широте и долготе из базы данных, и я не могупоказывать маркеры на карте Google в части JavaScript, я могу получить свою базу данных (lan, lng) в своем представлении нормально, но не могу распечатать их как маркеры на карте Google, маркеры не отображаются вообще, я думаю, это потому, что я поставилвсе сценарии внутри initMap (). теперь все, что я хочу, это показать данные моей базы данных (lan, lng) на карте Google в качестве маркеров. любая помощь будет принята с благодарностью. извините мой плохой английский

код 

<!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>

1 Ответ

0 голосов
/ 08 октября 2019

наконец я решил свою проблему, я сделал это с помощью 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,
        }); 
    };
...