搜索$ .GETJSON并单击不起作用

时间:2012-05-30 00:01:47

标签: jquery json google-maps

好的,所以我可以从PHP页面获取JSON,但是当用户点击li内的ul#stores时,它就不会运行。它就像

$("ul#stores").html("");
myMarkers = {"markers": data}

没有更新,它无法在列表中找到它,并且下面的函数没有运行。完整代码结束。我不确定这是否是解释我的问题的最佳方式。

现场演示@ http://brightchoice.com.au/map.html

$("ul#stores li").on("click", function(event){
            var store = $(this).text();

            $("ul#stores").hide();
            $("#storeinfo").show();
            $.each(myMarkers.markers, function(i, data){

            if(store == data.name) {
                $("#storeinfo").append("<a href='map.html'><div class='greenbar'><div class='body'><div>  <span></span> </div> <p>Back</p></div></a></div><h1>"+data.name+"</h1>"+data.phone+"<br><br>"+data.address);

                //console.log(data.address);
                //console.log(data.state); // and more
             }
            });

            //searchlistings($(this).text());

        });

完整代码

<script type="text/javascript">
// <![CDATA[
 $(document).ready(function(){
        //set up markers
         var myMarkers = {"markers": [{"id": 1,"name": "Belconnen","url_name": "belconnen","address": "Shop 176, 3rd Floor, Westfield Shopping Centre, Benjamin Way","suburb": "Belconnen","state": "act","postcode": 2618,"country": "Australia","phone": "(02) 6251 1838","fax": "","photo": "dcddfcb5c806b2255c611bd2d108cead.JPG","text": "","display": 1,"lat": -35.238428606,"lng": 149.065917134,"email": "tc.belconnen@telechoice.com.au","dealer_code": 63014,"region_id": 3,"type": 4}]};

//set up map options
        defaultmap();

        $("a#backtomap").on("click", function(event){
        defaultmap();
            $("ul#stores").show();
            $("#storeinfo").hide();
        });


        $("button#search").on("click", function(event){

            var postcode = $("input#postcode").val();
            $.getJSON("http://vipcashback.com/system/classes/core.php?task=postcode&mycode="+postcode, function(data) {
            $("ul#stores").html("");
              listings = {"markers": data}
                $("#map").mapmarker({
                    zoom : 10,
                    center : postcode+" australia",
                    markers : listings
                });

                $.each(myMarkers.markers, function(i, data){

                });
            });
        });

        $("ul#stores li").on("click", function(event){
            var store = $(this).text();
            alert(store);
            $("ul#stores").hide();
            $("#storeinfo").show();
            $.each(myMarkers.markers, function(i, data){

            if(store == data.name) {
                $("#storeinfo").append("<a href='map.html'><div class='greenbar'><div class='body'><div>  <span></span> </div> <p>Back</p></div></a></div><h1>"+data.name+"</h1>"+data.phone+"<br><br>"+data.address);

                //console.log(data.address);
                //console.log(data.state); // and more
             }
            });

            //searchlistings($(this).text());

        });


        function defaultmap(){
            $("#map").mapmarker({
                zoom : 3,
                center : 'Australia',
                markers : myMarkers
            });
        }

});

// ]]>
</script>

2 个答案:

答案 0 :(得分:1)

如果你动态创建应该使用的元素:

$('ul#stores li).live('click',function(){ ...});

直播,以便将来的元素自动绑定到事件。

答案 1 :(得分:0)

通过插件代码,它需要PHP页面中JSON中缺少的经度和纬度

插件代码 -

             if(latitude!="" && longitude!=""){
                var marker = new google.maps.Marker({
                    map: map, 
                    position: new google.maps.LatLng(latitude,longitude),
                    animation: google.maps.Animation.DROP,
                    icon: icon
                });

                // Set up markers with info windows 
                google.maps.event.addListener(marker, 'click', function() {
                    // Close all open infowindows
                    if (infowindow) {
                        infowindow.close();
                    }

                    infowindow = new google.maps.InfoWindow({
                        content: baloon_text
                    });

                    infowindow.open(map,marker);
                });
            }
        });