Question

我需要知道如何在不单击按钮的情况下在网站上显示此map，我需要在此代码中进行哪些更改？

<div style="margin-top:-5px" class="collapse" id="collapseMap">
    <?php if($appModule == "tours"){ ?>
    <iframe id="mapframe" width="354" height="580" style="position: static;" src="" frameborder="0"></iframe>
    <script>
        $('#collapseMap').on('shown.bs.collapse', function(e){
            $("#mapframe").prop("src","<?php echo base_url();?>tours/tourmap/<?php echo $module->id; ?>");
        });
    </script>
    <?php }else{ ?>
    <div id="map" class="map"></div>
    <br>
    <script>
        $('#collapseMap').on('shown.bs.collapse', function(e) {
            (function(A) {
                if (!Array.prototype.forEach)
                    A.forEach = A.forEach || function(action, that) {
                        for (var i = 0, l = this.length; i < l; i++)
                            if (i in this) action.call(that, this[i], i, this);
                    }
            })(Array.prototype);
            var mapObject, markers = [],
                markersData = {
                    'marker': [{
                        name: '<?php echo character_limiter($module->title, 80);?>',
                        location_latitude: <?php echo $module->latitude;?>,
                        location_longitude: <?php echo $module->longitude;?>,
                        map_image_url: '<?php echo $module->thumbnail;?>',
                        name_point: '<?php echo character_limiter($module->title, 80);?>',
                        description_point: '<?php echo character_limiter(strip_tags(trim($module->desc)),100);?>',
                        url_point: '<?php echo $module->slug;?>'
                    }, <?php foreach($module->relatedItems as $item):?> {
                        name: 'hotel name',
                        location_latitude: "<?php echo $item->latitude;?>",
                        location_longitude: "<?php echo $item->longitude;?>",
                        map_image_url: "<?php echo $item->thumbnail;?>",
                        name_point: "<?php echo $item->title;?>",
                        description_point: '<?php echo character_limiter(strip_tags(trim($item->desc)),100);?>',
                        url_point: "<?php echo $item->slug;?>"
                    }, <?php endforeach;?>]
                };
            var mapOptions = {
                zoom: 14,
                center: new google.maps.LatLng(<?php echo $module->latitude;?>, <?php echo $module->longitude;?>),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: !1,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                panControl: !1,
                panControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                zoomControl: !0,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                scrollwheel: !1,
                scaleControl: !1,
                scaleControlOptions: {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                streetViewControl: !0,
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.LEFT_TOP
                },
                styles: []
            };
            var marker;
            mapObject = new google.maps.Map(document.getElementById('map'), mapOptions);
            for (var key in markersData)
                markersData[key].forEach(function(item) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
                        map: mapObject,
                        icon: '<?php echo base_url(); ?>uploads/global/default/' + key + '.png',
                    });
                    if ('undefined' === typeof markers[key])
                        markers[key] = [];
                    markers[key].push(marker);
                    google.maps.event.addListener(marker, 'click', (function() {
                        closeInfoBox();
                        getInfoBox(item).open(mapObject, this);
                        mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude))
                    }))
                });

            function hideAllMarkers() {
                for (var key in markers)
                    markers[key].forEach(function(marker) {
                        marker.setMap(null)
                    })
            };

            function closeInfoBox() {
                $('div.infoBox').remove()
            };

            function getInfoBox(item) {
                return new InfoBox({
                    content: '<div class="marker_info" id="marker_info">' + '<img style="width:280px;height:140px" src="' + item.map_image_url + '" alt="<?php echo character_limiter($module->title, 80);?>"/>' + '<h3>' + item.name_point + '</h3>' + '<span>' + item.description_point + '</span>' + '<a href="' + item.url_point + '" class="btn btn-primary"><?php echo trans('
                    0177 ');?></a>' + '</div>',
                    disableAutoPan: !0,
                    maxWidth: 0,
                    pixelOffset: new google.maps.Size(40, -190),
                    closeBoxMargin: '0px -20px 2px 2px',
                    closeBoxURL: "<?php echo $theme_url; ?>assets/img/close.png",
                    isHidden: !1,
                    pane: 'floatPane',
                    enableEventPropagation: !0
                })
            }
        });
    </script>
    <?php } ?>
</div>
<!-- map -->

Answer 1

尝试删除

$('#collapseMap').on('shown.bs.collapse', function(e){

和

});

来自脚本的两个部分。

Answer 2

没有点击？您是说页面加载吗？

如果是这样，则可以像这样显示可折叠元素。应当将其放置在您原始的可折叠元素定义之后，和/或修改为您可能尝试达到的对应项目：

<script>

    $(function() {
        var collapsible = $('#collapseMap');

        collapsible.each(function() {
            $(this).collapse('show');
        });
    });

</script>

如何在不单击按钮的情况下显示此地图？

2 个答案: