Question

我有简单的下拉菜单，我可以只选择一件事，但我想选择多个下拉列表并将值传递给谷歌我如何通过请建议一些事情。

<script type="text/javascript">
         $(function(){
      $('#lstFruits').multiselect().on('click',function(){
            for(var i=0; i<$('#lstFruits').val().length;i++){
                search_types(map.getCenter(),$('#lstFruits').val()[i]);
            }
          });
     });



        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 = $('.case: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：

<select id="lstFruits" multiple="multiple" class="case btn btn-default">

    <option name="mytype" class="case" id="school"  value="school">School</option>
    <option  name="mytype" class="case" id="restaurant"  value="restaurant"/><label for="restaurant">Restaurant</option>
    <option name="mytype" class="case"  id="hospital"  value="hospital"/><label for="hospital">Hospital</option>
    <option  name="mytype"  class="case" id="bus_station"  value="bus_station"/><label for="bus_station">Bus Stopedge</option>
    <option name="mytype"  class="case" id="park"  value="park"/><label for="park">Park</option>


    <option name="mytype"  class="case" id="bank"  value="bank">Bank</option>
    <option  name="mytype"  class="case" id="bar"  value="bar"/><label for="restaurant">Bar</option>
    <option name="mytype"  class="case" id="movie_theater"  value="movie_theater"/><label for="movie_theater">Movie Theatre</option>
    <option  name="mytype"  class="case" id="night_club"  value="night_club"/><label for="bus_station">Night Club</option>
    <option name="mytype"  class="case" id="zoo"  value="zoo"/><label for="park">Zoo</option>

    <option name="mytype"  class="case" id="gym"  value="gym">Gym</option>
    <option  name="mytype"  class="case" id="atm"  value="atm"/><label for="restaurant">ATM</option>
    <option name="mytype"  class="case" id="spa"  value="spa"/><label for="movie_theater">SPA</option>


</select>

Answer 1

如果您使用普通html选择框，那么首先用

替换$('.case').click(function(){...}回调

$('#lstFruits').on('click',function(){
        for(var i=0; i<$('#lstFruits').val().length;i++){
            search_types(map.getCenter(),$('#lstFruits').val()[i]);
        }
});

如果您使用 Bootstrap Multiselect ，请注释掉$('#lstFruits').multiselect().on('click',function(){ ... }并使用此

$('#lstFruits').multiselect({
        onChange: function(element, checked) {
                var types = $('#lstFruits option:selected');
                $(types).each(function(index, value){
                    search_types(map.getCenter(),$(this).val());
                });
        }
});

现在传递type作为第二个参数，注释掉该行 var type = $('.case:checked').val();

function search_types(latLng,type){
   //your existing code
   //var type = $('.case:checked').val();
}

附近的地方使用多个下拉CheckBoxes

1 个答案: