Php 如何按经纬度显示谷歌地图范围_Php_Laravel_Google Maps

Php 如何按经纬度显示谷歌地图范围

php laravel google-maps

Php 如何按经纬度显示谷歌地图范围,php,laravel,google-maps,Php,Laravel,Google Maps,我在使用laravel，我在很多地区有很多司机，我有每个司机的当前位置（纬度&经度），从纬度和经度我想在地图上为每个车手显示一个半径为10公里的红色区域，我需要你的帮助来指导我如何做到这一点，我试过下面的代码，但它只显示了标记，只显示了一个车手 <script src="/landing/assets/js/jquery-2.1.0.min.js"></script> <script src="https://maps.googleap

我在使用laravel，我在很多地区有很多司机，我有每个司机的当前位置（

纬度

经度

），从

纬度

和

经度

我想在地图上为每个车手显示一个半径为10公里的红色区域，我需要你的帮助来指导我如何做到这一点，我试过下面的代码，但它只显示了标记，只显示了一个车手

<script src="/landing/assets/js/jquery-2.1.0.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{config('services.googlekey.ApiKey')}}&libraries=places&callback=initAutocomplete" async defer></script>
<script type="text/javascript">
// check DOM Ready
$(document).ready(function() {

    var latitude =  {{ $driver->latitude }};

    var longitude = {{ $driver->longitude }};

    // execute
    (function() {
        // map options
        var options = {
            zoom: 17,
            center: new google.maps.LatLng(latitude, longitude), // centered US
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            mapTypeControl: false
        };

        // init map
        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

        // NY and CA sample Lat / Lng
        var southWest = new google.maps.LatLng(latitude, longitude);
        var northEast = new google.maps.LatLng(latitude, longitude);
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();

        // set multiple marker
        for (var i = 0; i < 250; i++) {
            // init markers
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                map: map,
                title: 'Click Me ' + i
            });

            // process multiple info windows
            (function(marker, i) {
                // add click event
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow = new google.maps.InfoWindow({
                        content: 'Hello, World!!'
                    });
                    infowindow.open(map, marker);
                });
            })(marker, i);
        }
    })();
});
</script>

<body>
<div id="map_canvas" style="width: 500px; height:600px;"></div>
</body>


//检查DOM就绪
$（文档）.ready（函数（）{
变量纬度={{$driver->latitude}；
变量经度={{$driver->longitude}；
//执行
（功能（）{
//地图选项
变量选项={
缩放：17，
中心：新的google.maps.LatLng（纬度，经度），//以我们为中心
mapTypeId:google.maps.mapTypeId.TERRAIN，
mapTypeControl:false
};
//初始映射
var map=new google.maps.map（document.getElementById（'map_canvas'），选项）；
//纽约和加利福尼亚州Lat/Lng样品
var soutwest=新的google.maps.LatLng（纬度、经度）；
var northEast=新的google.maps.LatLng（纬度、经度）；
var lngSpan=northEast.lng（）-soutwest.lng（）；
var latSpan=northEast.lat（）-soutwest.lat（）；
//设置多个标记
对于（变量i=0；i<250；i++）{
//初始标记
var marker=new google.maps.marker({
位置：新的google.maps.LatLng（soutwest.lat（）+latSpan*Math.random（），soutwest.lng（）+lngSpan*Math.random（）），
地图：地图，
标题：“点击我”+i
});
//处理多个信息窗口
（功能（标记器，i）{
//添加单击事件
google.maps.event.addListener（标记'click'，函数（）{
infowindow=新建google.maps.infowindow({
内容：“你好，世界！！”
});
信息窗口。打开（地图、标记）；
});
})（标记，一）；
}
})();
});