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

时间:2017-02-15 12:09:40

标签: javascript php jquery html5 css3

代码:

<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>

标签:

<ul class="nav nav-tabs" style="border-bottom: 1px solid #696767;" id="myTab">
            <li class="active">
                <a data-toggle="tab" href="#home">
                <center><i class="fa fa-university one" aria-hidden="true" style="color: 315f9e;"></i></center>
                <b>Overview</b></a>
            </li>
            <li>
                <a data-toggle="tab" href="#menu2">
                <center><i class="fa fa-file one" aria-hidden="true" style="color:#315f9e;"></i></center>
                <b>Fee Structure</b></a>
            </li>
            <li>
                <a data-toggle="tab" href="#menu4">
                <center><i class="fa fa-home one" aria-hidden="true" style="color:#315f9e;"></i></center>
                <b>Facilities</b></a>
            </li>
            <li>
                <a data-toggle="tab" href="#menu1">
                <center><i class="fa fa-users one" aria-hidden="true" style="color:315f9e;"></i></center>
                <b>Placement</b></a>
            </li>

            <li>
                <a data-toggle="tab" href="#menu3">
                <center><i class="fa fa-map-marker one" aria-hidden="true" style="color:315f9e;"></i></center>
                <b>Map</b></a>
            </li>

            <li>
                <a data-toggle="tab" href="#menu5">
                <center><i class="fa fa-phone one" aria-hidden="true" style="color:#315f9e;"></i></center>
                <b>Contact</b></a>
            </li>
        </ul>

<div id="home" class="tab-pane fade">
    <h1>home</h1>
</div>
<div id="menu1" class="tab-pane fade">
    <h1>menu1</h1>
</div>
<div id="menu2" class="tab-pane fade">
    <h1>menu2</h1>
</div>
<div id="menu3" class="tab-pane fade">
    <h1>menu3</h1>
</div>
<div id="menu4" class="tab-pane fade">
    google map
</div>
<div id="menu5" class="tab-pane fade">
    <h1>menu5</h1>
</div>

在下面的代码中,当我在menu4标签地图中放置谷歌地图代码时没有显示,但如果我在标签地图显示之外放置了谷歌地图代码,那么我该如何删除这个问题呢?

谢谢

0 个答案:

没有答案