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

這是我的腳本.JS

<script>

    function makeRequest(url, callback) {
        var request;
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest(); 
        } else {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                callback(request);
            }
        }
        request.open("GET", url, true);
        request.send();
    }



    var map;

    // Beni
    var center = new google.maps.LatLng(0.496422, 29.4751);

    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();

    function init() {

    var mapOptions = {
        zoom: 13,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    makeRequest("{{route('alertes.index')}}", function (data) {

        var data = JSON.parse(data.responseText);

        for (var i = 0; i < data.length; i++) {
            displayLocation(data[i]);
        }
    });
}

    // displayLocation method

    function displayLocation(location) {

    var content = '<div class="infoWindow"><strong>' + location.code_client + '</strong>'
        + '<br/>' + location.client_category + '</div>';

    if (parseInt(location.latitude) == 0) {
        geocoder.geocode({'client_category': location.client_category}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: location.code_client
                });

                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                });
            }
        });
    } else {
        var position = new google.maps.LatLng(parseFloat(location.latitude), parseFloat(location.longitude));
        var marker = new google.maps.Marker({
            map: map,
            position: position,
            title: location.code_client
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(content);
            infowindow.open(map, marker);
        });
    }
}

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);
    }

Answer 4

復制此代碼並重新放置此代碼

content : `<div><h5>${Number(datas[index].latitude)}</h5><p><i class="icon address-icon"></i>${Number(datas[index].longitude)}</p></div>`