Question

我想根据来自循环的动态数据在一个页面上显示多个谷歌地图，因此它可以是1个地图或2个地图或每页20个地图。

我可以显示一张地图，但我不知道如何（或者甚至可能）显示多张带有动态数据的地图。

<div class="container results">

    <div class="row">
        <div class="col-12">
            @if (count($results) > 0)
                @php
                $i = 1;
                @endphp
                @foreach ($results as $r)
                    <div class="result">
                        <p><label for="">Name: </label> {{ $r->name }}</p>
                        <p>
                            <label for="">Address: </label> 
                            {{ $r->street }}
                        </p>

                        @php
                        $address = $r->street . ' ' . $city . ' ' . 'UK';

                        $formattedAddr = str_replace(' ','+',$address);
                        $arrContextOptions=array(
                            "ssl"=>array(
                                "verify_peer"=>false,
                                "verify_peer_name"=>false,
                            ),
                        );  
                        $geocodeFromAddr = file_get_contents('https://maps.googleapis.com/maps/api/geocode/json?key=MY_API_KEY&address='.$formattedAddr.'&sensor=false', false, stream_context_create($arrContextOptions)); 
                        $output = json_decode($geocodeFromAddr);
                        $latitude  = $output->results[0]->geometry->location->lat; 
                        $longitude = $output->results[0]->geometry->location->lng;

                        @endphp
                        <div id="map{{$i}}" style="width: 200px; height: 200px;">
                        </div>
                    </div>

                    <script>
                        function initMap() {

                            var myLatLng = {lat: {{$latitude}}, lng: {{$longitude}}};
                            var map = new google.maps.Map(document.getElementById('map{{$i}}'), {
                            zoom: 15,
                            center: myLatLng
                            });

                            var marker = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            title: 'Hello World!'
                            });
                        }
                    </script>

                    @php $i++ @endphp

                @endforeach   

        @endif
        </div>
    </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap" async defer></script>

正如您在上面所看到的，我使用$i变量来生成map1，map2等ID，我也在js代码中使用该变量（哪个有效，我得到了我的期望。

但是我将谷歌地图链接包括一次，因为它不能多次包含，所以我怎样才能使它工作？

Answer 1

您不必多次包含该脚本。

这个

<script type="text/javascript" src="https://maps.google.com/maps/api/js?callback=initMap"></script>

和这个

var map1 = new google.maps.Map(document.getElementById('map1'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 5
})

var map2 = new google.maps.Map(document.getElementById('map2'), {
    center: {lat: 42.948766, lng: -82.691497},
    zoom: 4
})

应该足够了。

这是一个工作小提琴：

https://jsfiddle.net/anatolysukhanov/a6e5bbtr/

使用动态参数在一个页面上显示多个谷歌地图

1 个答案: