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

仍然有问题这是我的NEfunction initMap(){&nbsp; &nbsp; &nbsp; &nbsp; var mapElement = document.getElementById('map');&nbsp; &nbsp; &nbsp; &nbsp; var url = '/map-marker';&nbsp; &nbsp; &nbsp; &nbsp;async function markerscodes(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var data = await axios(url);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var alerteData = data.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;mapDisplay(alerteData);&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;markerscodes();&nbsp; &nbsp; &nbsp; function&nbsp; mapDisplay(datas) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //map otions&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var options ={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; center :{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lat:Number(datas[0].latitude), lng:Number(datas[0].longitude)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; zoom : 10&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Create a map object and specify the DOM element for display&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var map = new google.maps.Map(mapElement, options);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var markers = new Array();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let index = 0; index < datas.length; index++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markers.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; coords: {lat: Number(datas[index].latitude), lng:Number(datas[index].longitude)},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content : '<div><h5>${datas[index].code_du_suspect}</h5><p><i class="icon address-icon"></i>${datas[index].etat_du_suspect}</p></div>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //looping through marker&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < markers.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //une fontion a creer si dessous&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addMarker(markers[i]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function addMarker(props){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var marker = new gooogle.maps.Marker({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position : props.coords,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; map: map&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(props.iconImage){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marker.setIcon(props.iconImage);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(props.content){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var infoWindow = new google.maps.infoWindow({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content : props.content&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marker.addListener('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;infoWindow.open(map, marker);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }

Answer 2

更改回调=initMap不是回调=init&nbsp;&nbsp;&nbsp;src="https://maps.googleapis.com/maps/api/js?key=yourapikey&callback=init"></script>

Answer 3

以这种方式尝试您的数据格式&nbsp; &nbsp;public function mapMarker(){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $locations = Alerte::all();&nbsp; &nbsp; &nbsp; &nbsp; $map_markes = array ();&nbsp; &nbsp; &nbsp; &nbsp; foreach ($locations as $key => $location) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $map_markes[] = (object)array(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'code' => $location->code,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'code_client' => $location->code_client,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'client_category' => $location->client_category,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'longitude' => $location->longitude,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'latitude' => $location->latitude,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return response()->json($map_markes);&nbsp; &nbsp; }