Question

在我的引导站点上，我使用导航栏在不同的html页面之间进行切换。此页面之一是带有Google地图的联系页面。现在，当我单击联系页面时，不会显示地图，但是如果刷新页面，则会显示地图。这是我的代码：

<!-- Map container -->
            <div id="map" id="map-container-7" class="z-depth-1-half map-container">
            </div>

 <script async defer

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

js文件

$(function () {

function initMap() {

    var location = new google.maps.LatLng(41.650656, 12.716989);

    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: location,
        zoom: 16,
        panControl: false,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);

    var markerImage = 'marker.png';

    var marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: markerImage
    });

    // var contentString = '<div class="info-window">' +
    //         '<h3>Info Window Content</h3>' +
    //         '<div class="info-content">' +
    //         '<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>' +
    //         '</div>' +
    //         '</div>';
    //
    // var infowindow = new google.maps.InfoWindow({
    //     content: contentString,
    //     maxWidth: 400
    // });

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

    var styles = [{"featureType": "landscape", "stylers": [{"saturation": -100}, {"lightness": 65}, {"visibility": "on"}]}, {"featureType": "poi", "stylers": [{"saturation": -100}, {"lightness": 51}, {"visibility": "simplified"}]}, {"featureType": "road.highway", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]}, {"featureType": "road.arterial", "stylers": [{"saturation": -100}, {"lightness": 30}, {"visibility": "on"}]}, {"featureType": "road.local", "stylers": [{"saturation": -100}, {"lightness": 40}, {"visibility": "on"}]}, {"featureType": "transit", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]}, {"featureType": "administrative.province", "stylers": [{"visibility": "off"}]}, {"featureType": "water", "elementType": "labels", "stylers": [{"visibility": "on"}, {"lightness": -25}, {"saturation": -100}]}, {"featureType": "water", "elementType": "geometry", "stylers": [{"hue": "#ffff00"}, {"lightness": -25}, {"saturation": -97}]}];

    map.set('styles', styles);


}

google.maps.event.addDomListener(window, 'load', initMap);
});

每当我单击联系页面的选项卡时，是否有任何帮助如何解决此问题并显示地图？

谢谢

Bootstrap 4 Google Map刷新页面显示

0 个答案: