您好,在我的网站上,有一个Google地图,当用户单击“按钮”以查看该地图后便会加载,这就是代码:
<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 -->
我希望你们向我展示如何做到这一点,以及我需要在此代码中进行哪些编辑,以便当用户自动访问页面时加载地图,我确定我需要进行编辑
$('#collapseMap').on('shown.bs.collapse', function(e){
但是我不知道怎么做! 谢谢
答案 0 :(得分:0)
如果我对您的理解正确,则应该更改
$('#collapseMap').on('shown.bs.collapse', function(e) {
//some code
});
到
$(document).ready(function() {
//some code
});
因此显示地图的代码将在DOM加载后立即运行,而不是在单击按钮时运行(更确切地说,会触发“ shown.bs.collapse”。)
编辑: 另一种方法是将这些行添加到页面模板中:
<script>
$(document).ready(function() {
$('#collapseMap').trigger('shown.bs.collapse');
});
</script>
因此,应该是在单击按钮时触发的事件会在DOM加载后立即触发。