谷歌地图，如何在Laravel/JS中在标记标签中显示数据

Question

谷歌地图，如何在Laravel/JS中在标记标签中显示数据

4

问题在于当我将数据控制器传递给blade/JS时，首先我将其转换为JSON(因为没有其他方法)，然后将其传递给javascript。但是我的标签不能正常工作。以下是脚本代码。

问题：将数据控制器传递给blade/JS时，标签无法正常工作。解决方案：将数据转换为JSON格式，然后在传递给JavaScript。以下是脚本代码。

var estates = <?php echo json_encode($estates);?>

            function initMap()
            {
                var options =
                    {
                        zoom : 10,
                        center : {lat:34.652500, lng:135.506302}
                    };

                var map = new google.maps.Map(document.getElementById('map'), options);
                for (var i=0; i < estates.length; i++) {
                @foreach ($estates as $est)
                    var marker = new google.maps.Marker({
                            map: map,
                            label: estates.price,
                            position: {
                                lat: {{$est->lat}},
                                lng: {{$est->lng}}
                            }
                     });
                @endforeach
                }
            }

如果我尝试传递价格像这样{{$est->price}}，那么我会得到语法标记错误。因为价格是带有日文字符的varchar。所以我需要先将其转换为Json并进行迭代。但是当我这样做时，地图中没有标记和标签。只有空地图，控制台中也没有错误？如果我删除JS for循环，那么标记就会出现，但没有标签... 有人知道我在这里漏掉了什么吗？

- user10753862

2

请展示您从哪里初始化“initMap”函数。检查是否包含Google地图脚本。 - Jahid Mahmud

1

我已经更新了代码，加入了包含initMap回调函数的脚本标签。@JahidMahmud - user10753862

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- McBern · Accepted Answer

尝试使用新的google.maps.LatLng()函数：

        var estates = <?php echo json_encode($estates);?>
        //estates = <?php echo json_decode($estates);?>
        function initMap()
        {
            var options =
                {
                    zoom : 10,
                    center : {lat:34.652500, lng:135.506302}
                }

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

            for (var i=0;i<estates.length;i++){
            var latLng_ = new google.maps.LatLng(estates['lat'],estates['lng']);
            var marker = new google.maps.Marker({
                    map: map,
                    position: latLng_,
                    icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAy10Br9W1wWCSQNPc6f9CarvNEO4qqCg1BDbe7_mYZqHwXj3v',
                    label: estates['price']
                });


            var infoWindow = new google.maps.InfoWindow({
                content: estates['price']
            });

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