Laravel 从数据库中获取经度和纬度并在谷歌地图上显示标记

Question

我正在使用 laravel 框架编写一个 Web 应用程序。我已经在数据库中记录了经度、纬度和其他信息。我想获取这些信息并在谷歌地图上显示它们的标记。我得到的所有示例都是 PHP 临时代码。有没有人可以帮助我如何在 laravel 中做到这一点？这是数据库代码Schema::create('alertes', function (Blueprint $table) {           $table->bigIncrements('id');           $table->string('code');           $table->string('code_client');           $table->string('client_category');           $table->string('longitude');           $table->string('latitude');           $table->timestamps();       });这是我的刀片文件                <div id="map" style="width:100%;height:400px;"></div>            </div>        </div>    </div></div>@endsection()@section('custom-script')<script type="text/javascript" src="{{asset('assets')}}/map/carte_alertes.js"></script><script    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnyJJ2gorvX0rsuhBJLNUsfyioWSSep2Q&callback=init"></script><script></script>@endsection

Answer 1

仍然有问题

这是我的NE

function initMap(){

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

        var url = '/map-marker';

       async function markerscodes(){

           var data = await axios(url);

           var alerteData = data.data;

           mapDisplay(alerteData);

       }

       markerscodes();

      function  mapDisplay(datas) {

          //map otions

          var options ={

              center :{

                  lat:Number(datas[0].latitude), lng:Number(datas[0].longitude)

              },

              zoom : 10

          }

          //Create a map object and specify the DOM element for display

          var map = new google.maps.Map(mapElement, options);

          var markers = new Array();

          for (let index = 0; index < datas.length; index++){

              markers.push({

                  coords: {lat: Number(datas[index].latitude), lng:Number(datas[index].longitude)},

                  content : '<div><h5>${datas[index].code_du_suspect}</h5><p><i class="icon address-icon"></i>${datas[index].etat_du_suspect}</p></div>'

              })

          }

          //looping through marker

          for (var i = 0; i < markers.length; i++){

              //une fontion a creer si dessous

              addMarker(markers[i]);

          }

         function addMarker(props){

              var marker = new gooogle.maps.Marker({

                  position : props.coords,

                  map: map

              });

              if(props.iconImage){

                  marker.setIcon(props.iconImage);

              }

              if(props.content){

                  var infoWindow = new google.maps.infoWindow({

                      content : props.content

                  });

                  marker.addListener('click', function () {

                     infoWindow.open(map, marker);

                  });

              }

         }

      }

    }

Answer 2

更改回调=initMap不是回调=init

   src="https://maps.googleapis.com/maps/api/js?key=yourapikey&callback=init"></script>

Answer 3

以这种方式尝试您的数据格式

   public function mapMarker(){ 

        $locations = Alerte::all();

        $map_markes = array ();

        foreach ($locations as $key => $location) { 

            $map_markes[] = (object)array(

                'code' => $location->code,

                'code_client' => $location->code_client,

                'client_category' => $location->client_category,

                'longitude' => $location->longitude,

                'latitude' => $location->latitude,

            );

        }

        return response()->json($map_markes);

    }