Gmaps 3 mouseover无法正常工作

时间:2013-07-20 13:07:35

标签: google-maps-api-3 jquery-gmap3 jquery-gmap

我正在使用gmaps3在鼠标悬停时显示叠加但是当我将鼠标移动到标记时未调用鼠标悬停监听器

以下是整个代码

function init_map(){
          $mapElements=jQuery(".map-details");
          var markers=[];

            $mapElements.each(function(e){
                $e=$(this);
                if(!($e.data("lat")&&$e.data("long")))
                    return;
                var img_p="https://encrypted.google.com/images/srpr/logo4w.png"
                var marker= {
                        latLng:[$e.data("lat"),$e.data("long")], 
                        data:{
                            img_preview: img_p, 
                            properties_name:"023 Central Park [Rent]", 
                            properties_desc:"Lorem Ipsum Go Green",
                            properties_link:"#", 
                            zip:001233, 
                            city:"Jakarta"
                        }
            }
                markers.push(marker);

            });

        <?php /* if($first):/**/?>
         $("#map-canvas-multiple").gmap3({
                map:{
                    // CENTRAL MAP DEFAULT
                    address:"New Delhi, India",
                    options:{
                        zoom:8,
                        scaleControl: false,
                        scrollwheel: false,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        mapTypeControl: true,
                        mapTypeControlOptions: {
                            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                        }
                    }
                },
                marker:{
                    // DATA LOCATION
                    values:markers
                },
                    events:{
                        mouseover: function(marker, event, context){
                            console.log("hello from mouseover");
                            $(this).gmap3(
                            {
                                clear:"overlay"
                            },

                            {
                                overlay:{
                                    latLng: marker.getPosition(),
                                    options:{
                                        content:  "<div class='info-location'>" +
                                        "<div class='text'><h4>" 
                                        + context.data.properties_name +
                                        "</h4>"+
                                        "<img src='"+ context.data.img_preview +"' width=90> $300.999 <br/>"+
                                        context.data.properties_desc +
                                        "<br/><a href='"+context.data.properties_link +"'class='btn btn-proper btn-small'>See Detail</a></div>" +
                                        "</div>" +
                                        "<div class='arrow-location'></div>",
                                        offset: {
                                            x:-46,
                                            y:-73
                                        }
                                    }
                                }
                            });
                        }

                    }
                });

}
$(document).ready(init_map);

标记显示但是它们上的mousover不起作用 控制台没有错误。 hello mouseover行不会打印到控制台

1 个答案:

答案 0 :(得分:2)

经过数小时的头脑风暴后想出来。 events对象进入标记对象 而不是

            marker:{
                // DATA LOCATION
                values:markers
            },
                events:{
                    mouseover: function(marker, event, context){
                        console.log("hello from mouseover");
                        $(this).gmap3(
                        {
                            clear:"overlay"
                        },

应该是

marker:{
                // DATA LOCATION
                values:markers,
                events:{
                    mouseover: function(marker, event, context){
                        console.log("hello from mouseover");
                        $(this).gmap3(
                        {
                            clear:"overlay"
                        },
                  },