javascript - 如何为从数据库中获取的每个用户做一个标记？

Question

我有一个使用谷歌地图的 Laravel 项目。我有一个包含这两个字段的用户模型：纬度，经度。我想为每个用户制作一个带有 InfoWindow 的标记。

这是我的代码：

网页.php：

Route::get('/',function (){
    $users = \App\User::all() ;
    return view('map',compact(['users']));
}) ;

map.blade.php：

<script>
        var map ;
        function initMap() {

            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -23, lng: 150.644},
                zoom: 8
            });

            @forEach($users as $user)

                var lat = parseFloat({{$user->lat}});
                var lng = parseFloat({{$user->long}});

                var content = "{{$user->name}}" ;
                var infoWindow = new google.maps.InfoWindow(
                    {
                        content:content
                    }
                );

                var urlurl = {lat:lat,lng:lng} ;
                var marker = new google.maps.Marker(
                    {
                        position:urlurl ,
                        map:map
                    }
                ) ;

                marker.addListener('click',function () {
                    infoWindow.open(map,marker);
                });

            @endforeach
        }
    </script>

但是当我运行它时，它只会显示最后一个用户插入的标记。

我怎样才能为每个用户准确地制作一个标记？

标签： javascriptlaravelgoogle-maps

Answer 1

尝试使用闭包

<script>
    var map ;
    function addMyListener(aMarker, aInfoWindow){

            aMarker.addListener('click',function () {
                // Change marker to aMarker
                aInfoWindow.open(map,aMarker);
            });

    }

    function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -23, lng: 150.644},
            zoom: 8
        });

        @forEach($users as $user)

            var lat = parseFloat({{$user->lat}});
            var lng = parseFloat({{$user->long}});

            var content = "{{$user->name}}" ;
            var infoWindow = new google.maps.InfoWindow(
                {
                    content:content
                }
            );

            var urlurl = {lat:lat,lng:lng} ;
            var marker = new google.maps.Marker(
                {
                    position:urlurl ,
                    map:map
                }
            ) ;

            addMyListener(marker, infowindow);

        @endforeach
    }
</script>