附近的地图在引导标签中不起作用？

Question

代码：

<script type="text/javascript">
        $(function(){
            $('.chkbox').click
            (
                function(){

                if($(this).is(':checked'))
                {

                 }
                 else{
                $('#'+$(this).attr('id')).attr('checked',true);
            }
                search_types(map.getCenter());
            });

        });

        var map;
        var infowindow;
        var markersArray = [];
        var pyrmont = new google.maps.LatLng(20.268455824834792, 85.84099235520011);
        var marker;
        var geocoder = new google.maps.Geocoder();
        var infowindow = new google.maps.InfoWindow();
        // var waypoints = [];                  
        function initialize() {
            map = new google.maps.Map(document.getElementById('map'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: pyrmont,
                zoom: 14
            });
            infowindow = new google.maps.InfoWindow();
            //document.getElementById('directionsPanel').innerHTML='';
            search_types();
           }

        function createMarker(place,icon) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,
                icon: icon,
                visible:true  

            });

            markersArray.push(marker);
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent("<b>Name:</b>"+place.name+"<br><b>Address:</b>"+place.vicinity+"<br><b>Reference:</b>"+place.reference+"<br><b>Rating:</b>"+place.rating+"<br><b>Id:</b>"+place.id);
                infowindow.open(map, this);
            });

        }
        var source="";
        var dest='';

        function search_types(latLng){
            clearOverlays(); 

            if(!latLng){
                var latLng = pyrmont;
            }
            var type = $('.chkbox:checked').val();
            var icon = "images/"+type+".png";


            var request = {
                location: latLng,
                radius: 2000,
                types: [type] //e.g. school, restaurant,bank,bar,city_hall,gym,night_club,park,zoo
            };

            var service = new google.maps.places.PlacesService(map);
            service.search(request, function(results, status) {
                map.setZoom(14);
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                        results[i].html_attributions='';
                        createMarker(results[i],icon);
                    }
                }
            });

         }


        // Deletes all markers in the array by removing references to them
        function clearOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setVisible(false)
                }
                //markersArray.length = 0;
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);

        function clearMarkers(){
            $('#show_btn').show();
            $('#hide_btn').hide();
            clearOverlays()
        }
        function showMarkers(){
            $('#show_btn').hide();
            $('#hide_btn').show();
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setVisible(true)
                }

            }
        }

        function showMap(){

            var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
            var markerImage = new google.maps.MarkerImage(imageUrl,new google.maps.Size(24, 32));
            var input_addr=$('#address').val();
            geocoder.geocode({address: input_addr}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    var latlng = new google.maps.LatLng(latitude, longitude);
                    if (results[0]) {
                        map.setZoom(14);
                        map.setCenter(latlng);
                        marker = new google.maps.Marker({
                            position: latlng, 
                            map: map,
                            icon: markerImage,
                            draggable: true 

                        }); 
                        $('#btn').hide();
                        $('#latitude,#longitude').show();
                        $('#address').val(results[0].formatted_address);
                        $('#latitude').val(marker.getPosition().lat());
                        $('#longitude').val(marker.getPosition().lng());
                        infowindow.setContent(results[0].formatted_address);
                        infowindow.open(map, marker);
                        search_types(marker.getPosition());
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open(map,marker);

                        });


                        google.maps.event.addListener(marker, 'dragend', function() {

                            geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    if (results[0]) {
                                        $('#btn').hide();
                                        $('#latitude,#longitude').show();
                                        $('#address').val(results[0].formatted_address);
                                        $('#latitude').val(marker.getPosition().lat());
                                        $('#longitude').val(marker.getPosition().lng());
                                    }

                                    infowindow.setContent(results[0].formatted_address);
                                    var centralLatLng = marker.getPosition();
                                    search_types(centralLatLng);
                                    infowindow.open(map, marker);
                                }
                            });
                        });


                    } else {
                        alert("No results found");
                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });

        } 

    </script>

html代码：

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#home"><b>Overview</b></a>
    </li>
    <li>
        <a data-toggle="tab" href="#menu1"><b>Facilities</b></a>
    </li> 
</ul>


<div class="tab-content">
<div id="home" class="tab-pane fade in active">
     <p>Welcome</p>
</div>
<div id="menu1" class="tab-pane fade">
     //Google map
  <div id="map"></div>
    <input type="text" id="latitude" style="display:none;" placeholder="Latitude"/>
    <input type="text" id="longitude" style="display:none;" placeholder="Longitude"/>
    <input type="button" id="show_btn" value="show  markers" onClick="showMarkers();" style="display:none;" />
  <div id="test"></div>
</div>

在此代码中，当我单击主页选项卡时，文本将打开，但是当我单击menu1选项卡时，内容正在显示，但谷歌地图未显示。我想在menu1标签上打开谷歌地图。那么，我该怎么做呢请帮助解决这个问题？

谢谢

Answer 1

我正在尝试你的代码但是我觉得有些东西丢失了。所以，我已经创建了一种在这些标签内加载一个简单地图的方法。地图未在选项卡内加载的问题是因为地图成为隐藏元素，因此为了使其可见，我们必须在单击选项卡时重新初始化地图。我已经编写了下面的代码，希望这个答案可以解决你的问题。

function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }

//Bind click handlers - Here's the important part
$('.nav a').on('click', function() {
    setTimeout(function(){
        google.maps.event.trigger(map, 'resize');
    }, 50);
});

#map{ height:400px}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyClopfCRw-1QHy3ccVqoE5alwIdq44XwCc&callback=initMap">
    </script>

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#home"><b>Overview</b></a>
    </li>
    <li>
        <a data-toggle="tab" href="#menu1"><b>Facilities</b></a>
    </li> 
</ul>


<div class="tab-content">
<div id="home" class="tab-pane fade in active">
     <p>Welcome</p>
</div>
<div id="menu1" class="tab-pane fade">
     //Google map

    <div id="map"></div>
    <input type="text" id="latitude" style="display:none;" placeholder="Latitude"/>
    <input type="text" id="longitude" style="display:none;" placeholder="Longitude"/>
    <input type="button" id="show_btn" value="show  markers" onClick="showMarkers();" style="display:none;" />
  <div id="test"></div>
</div>