开发者

Google Maps addListener and Jquery weird behavior

This is weird, perhaps someone can explain to me why this happens.

If I use the commented out for in place of the .each() then every marker displays the last storeObj's info when clicked. However it seems when using the .each() its good. All the markers are places where they should be on either, its just the click listener.

PS: If you want the full source code then just visit this URL: http://tinyurl.com/38x6yfe

        //for(index=0; index < store_array.length; index++) {
        $(store_array).each(function(index, this_store){
            //name  address address2    csz state   phone lng   lat   accuracy  brands
            //  0      1       2         3    4      5     6      7     8         9

            /*

            use this for FOR statement
            var name = store_array[index][0]
            name = name.replace(/\&/g,'&amp;');
            var address = store_array[index][1];
            var address2 = store_array[index][2];
            var csz = store_array[index][3];
            var state = store_array[index][4];
            var phone = store_array[index][5];
            var lng = store_array[index][6];
            var lat = store_array[index][7];
            //var accuracy = store_array[index][8];
            var brands = store_array[index][9];
            */

            var name = this_store[0]
            name = name.replace(/\&/g,'&amp;');
            var address = this_store[1];
            var address2 = this_store[2];
            var csz = this_store[3];
            var state = this_store[4];
            var phone = this_store[5];
            var lng = this_store[6];
            var lat = this_store[7];
            //var accuracy = this_store[8];
            var brands = this_store[9];



            var latlng = new google.maps.LatLng(lat, lng);

            var storeObj = new google.maps.Marker({
                position: latlng,
                icon: gicons[brands],
                shadow: iconShadow,
                map: G_MAP,
                visible: false,
                title: name,
                zIndex: Math.round(lat * -100000) << 5
            });

            storeObj.id = index;
            storeObj.name = name;
            storeObj.state = state;
            storeObj.brands = brands;

            //add this store into the stores array
            G_STORES_ARRAY.push(storeObj);


            console.log('index =' + index + ' name = ' + name + ' storeObj = ');
            console.log(storeObj);


            //create a listener for each store
            google.maps.event.addListener(storeObj, 'click', function () {
                //G_MAP.setCenter(latlng); 


                console.log('index =' + index + ' name = ' + name + ' storeObj = ');
                console.log(storeObj);

                var contentString = "<b>" + name + "<\/b><p>" + address + "<p>" + csz+ "<p>" + phone;

                var urlstring = encodeURIComponent(name+' '+address+' '+csz);
                contentString += '<br><a href="http://maps.google.com/?q='+urlstring+'" target="_blank">Directions</a>';
                contentString += ' - <a  href="javascript:G_MAP.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); G_MAP.setZoom(13);">Zoom To</a>';
                contentString += ' - <a  href="javascript:G_MAP.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); G_MAP.setZoom(parseInt(G_MAP.getZoom())+1);">[+]</a>';
                contentStrin开发者_Go百科g += ' - <a  href="javascript:G_MAP.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); G_MAP.setZoom(parseInt(G_MAP.getZoom())-1);">[-]</a>';


                G_INFOWINDOW.setContent(contentString);
                G_INFOWINDOW.open(G_MAP, storeObj);
            });

            google.maps.event.addListener(storeObj, 'mouseover', function () {
                storeObj.setIcon(gicons["none"]);
            });

            google.maps.event.addListener(storeObj, 'mouseout', function () {
                storeObj.setIcon(gicons[storeObj.brands]);
            });
        });
    });


To understand why this happens you will want to read up on closures in javascript. Here is a Google Maps API specific example, a more official description, and an explanation of how they're implemented in jQuery's .each() function

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜