如何在一个文件中添加多个功能?

时间:2012-05-11 16:49:21

标签: javascript function google-maps-api-3

我正在尝试创建一个mash Up of sorts ...我希望函数在一个文件中但是当我添加我的Ajax函数(一半向下)时没有任何显示。

此外,我想用jQuery显示它们,并且顶部函数(带有标记和信息的Google地图)在我添加底部函数之前都是有效的。

我应该像(Google)那样在(function(){})中添加它们,是什么();在googlemap功能的最后?

当我在我的代码中调用我的函数时,如果在Google中调用了window.onload,我将如何调用ajax进行预览。

我知道我可以使用$ .ready函数(){}但我只是将函数名称放在.ready函数{}

我不确定如何在一个文件中添加所有功能并使它们工作。基本上

这是代码:

(function() {

        //define global variables
        var map, geocoder, marker, infowindow;

        window.onload = function() {

            //creating the map
            var options = {
                zoom: 5,
                center: new google.maps.LatLng(53.383, -1.483),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map'), options);

            //code for catching the form submit event goes here
            //Getting the reference to the HTML form
            var form = document.getElementById('addressForm');

            //Catching the forms submit event
            form.onsubmit = function () {

                //getting the address from the text input
                var address = document.getElementById('address').value;

                //Making the geocode call
                getAddress(address);

                //Preventing the form from doing a page submit
                return false;
                }
            }

            //Function Stub
            function getAddress(address) {

                //Check to see if we already have a geocode object.
                //If not we create one
                if(!geocoder) {
                    geocoder = new google.maps.Geocoder();
                }

                //Creating the geoCoderRequest Object   
                var geocoderRequest = {
                    address: address
                }

                //Making the geocode request
                geocoder.geocode(geocoderRequest, function (results, status) {

                    //Check if status is ok beofre proceeding
                    if (status == google.maps.GeocoderStatus.OK){

                        //Center the map on the returned location
                        map.setCenter(results[0].geometry.location);

                        //Check to see if already a Marker there
                        if (!marker){
                            //Create a new marker and add it to the map
                            marker = new google.maps.Marker({
                                map: map    
                                });
                            }
                        //Setting position of the Marker to returned location
                        marker.setPosition(results[0].geometry.location);

                            //Check to see if we've already an info window
                            if(!infowindow) {
                                //Creating a new info window
                                infowindow = new google.maps.InfoWindow();
                                }
                            //Creating the content of the info window to the Address
                            //and the returned position
                            var content = '<strong>' + results[0].formatted_address + '</strong><br />';
                            content += 'Lat: ' + results[0].geometry.location.lat() + '<br />';
                            content += 'Lng: ' + results[0].geometry.location.lng();

                            //Adding the content to the info window
                            infowindow.setContent(content);

                            //Opening the infoWindow
                            infowindow.open(map, marker);

                        }

                });
            }

            })();


    // beginning of new function
            var xhr = false;
            var xPos, yPos;

            function prev(){
                    var link = document.getElementByTagName("a").onmouseover = showPreview;
                }

        function showPreview(evt) {
            if (evt) {
                var url = evt.target;
            }
            else{
                evt = window.event;
                var url = evt.srcElement;
            }
            xPos = evt.clientX;
            yPos = evt.clientY;

            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            }
            else {
                if (window.ActiveXObject) {
                    try {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) { }
                }
            }

            if (xhr) {
                xhr.onreadystatechange = showContents;
                xhr.open("GET", url, true);
                xhr.send(null);
            }
            else {
                alert("Sorry, but I couldn't create an XMLHttpRequest");
            }
            return false;
        }

            function showContents() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var outMsg = xhr.responseText;
                    }
                    else {
                        var outMsg = "There was a problem with the request " + xhr.status;
                        }
                        var preview = document.getElementById('preview');
                        preview.innerHTML = outMsg;
                        preview.style.top = parseInt(yPos)+2 + "px";
                        preview.style.left = parseInt(xPos)+2 + "px";
                        preview.style.visibility = "visible";

                        preview.onmouseout = function(){
                            document.getElementById('preview').style.visibility = "hidden";
                        }
                    }

1 个答案:

答案 0 :(得分:3)

这取决于你添加功能的原因。但这是一个简单的公式。如果您希望仅在文档就绪时调用函数,并希望在加载文档时调用它们一次。然后将它们添加为“匿名函数”

实施例:

$(function () {
    //you code
    ...............
    // you can call your named functions also here. 
    //like
    somefunction();
});

但是如果您希望稍后再调用它们,那么文档已经加载了。然后添加“命名函数”

实施例

function somename()
{
    ............
}

在这两种情况下,您可以将它们放在一个文件中,并且关于函数末尾的();,它是一种在JavaScript中立即调用匿名函数的方法,如jQuery中的document.ready。 / p>