Question

检查此视频，它在Chrome浏览器中正常工作。

https://www.screencast.com/t/gOLH7YFAt

检查以下视频，它在Safari浏览器中不起作用。但是当我移动Google地图时，它开始显示。

https://www.screencast.com/t/Rtpvsb8n9

请检查我的代码：

控制器中的弹出按钮：

->addColumn('address', function($q) {
            $lat = $long = $map = '';
            if (!empty($q->location)) {
                $lat = $q->location->lat;
                $long = $q->location->long;
                $map = '<a title="View Location" data-toggle="modal" data-target="#myModal" data-lat="'.$lat.'" data-lng="'.$long.'" style="cursor: pointer;text-decoration:underline;">'. $q->address .'</a>';
            } 
            return $map;
})

视图文件中的模型和脚本：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Location</h4>
                </div>
                <div class="modal-body">

                <div class="row">
                    <div class="col-md-12 modal_body_map">
                    <div class="location-map" id="location-map">
                        <div style="width: 600px; height: 400px;" id="map_canvas"></div>
                    </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

脚本：

<script>
    $(document).ready(function () {
       $('#myModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            initializeGMap(button.data('lat'), button.data('lng'));
            $("#location-map").css("width", "100%");
            $("#map_canvas").css("width", "100%");
        });

        $('#myModal').on('shown.bs.modal', function() {
            google.maps.event.trigger(map, "resize");
            map.setCenter(myLatlng);
        });
    });

    var map = null;
    var myMarker;
    var myLatlng;
    function initializeGMap(lat, lng) {
        myLatlng = new google.maps.LatLng(lat, lng);

        var myOptions = {
            zoom: 12,
            zoomControl: true,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        myMarker = new google.maps.Marker({
        position: myLatlng
        });
        myMarker.setMap(map);
    }
</script>

请帮助我，谢谢！

Google地图无法在Safari浏览器的弹出式窗口/模式窗口中使用

0 个答案: