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

问题描述

大家好，我需要你的帮助。我正在使用 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);
        });
    }
}

标签： javascripthtmllaravel

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

问题描述

解决方案

推荐阅读