Question

我正在通过两个下拉字段或搜索文本框和按钮更改谷歌地图上的中心点。对于这些事件中的每一个，我需要对输入进行地理编码并重新定位地图。我试图把所有三个事件放到一个函数中，这样我就可以重用代码了，但我无法让它工作。当我点击下拉列表时，它会尝试进行地理编码。知道如何解决这个问题吗？

代码：

jQuery('#input_13, #input_6_34, #map_change_button').bind('change click',
    function() {
        var geocoder = new GClientGeocoder();
        var address;
        if ( !jQuery("#map_search").val() ) {
            address = jQuery("#input_13 option:selected").text() + ", " +
                      jQuery("#input_6_34 option:selected").text();

        }
        else { 
            address = jQuery("#map_search").val();
        }
        if ( geocoder ) {
            geocoder.getLatLng(
                address,
                function(point) {
                    if ( !point ) {
                        alert(address + " not found");
                    } else {
                        map.setCenter(point);
                        marker.setPoint(point);
                        marker.show();
                        map.setZoom(13);

                        //jQuery("input#wp_geo_latitude").val(point.lat());   
                        //jQuery("input#wp_geo_longitude").val(point.lng());    
                    }    
                }    
            );    
        }
        return false;
    });

Answer 1

为什么不将主体放在单独的函数中，然后在单独引发这些事件时调用该函数？或许我误解了你的要求。

Answer 2

将课程放在每个下拉列表中

例如在你的html上说

<select id="input_13" class="myDropDownClass"/>
    <option name="box1" value="Value1">Display Text1</option>
    <option name="box2" value="Value2">Display Text2</option>
    <option name="box3" value="Value3">Display Text3</option>
</select>
<select id="input_6_34" class="myDropDownClass">
    <option name="box1" value="Value1">Display Text1</option>
    <option name="box2" value="Value2">Display Text2</option>
    <option name="box3" value="Value3">Display Text3</option>
</select>
<input id="map_change_button" type="submit"/>

然后在你的jquery上做这个

// Create a function
function ChangeMap() {

        var geocoder = new GClientGeocoder();

        var address;

        if ( !jQuery("#map_search").val() ) {

            address = jQuery("#input_13 option:selected").text() + ", " + jQuery("#input_6_34 option:selected").text();

        }

        else { 

            address = jQuery("#map_search").val();

        }

        if ( geocoder ) {

            geocoder.getLatLng(

                address,

                function(point) {

                    if ( !point ) {

                        alert(address + " not found");

                    } else {

                        map.setCenter(point);

                        marker.setPoint(point);

                        marker.show();

                        map.setZoom(13);

                        //jQuery("input#wp_geo_latitude").val(point.lat());

                        //jQuery("input#wp_geo_longitude").val(point.lng());

                    }

                }

            );

        }



        return false;
    }

// call the function ChangeMap() on the change event of the dropdown
$('.myDropDownClass').change(function{
    ChangeMap();
});

// call the function ChangeMap() on the click event of the submit button
$('#map_change_button').click(function{
    ChangeMap();
});

一个jQuery函数的多个事件

2 个答案: