1

我有一个功能性 gmap，当我单击标记时，它会显示标记并显示信息窗口。现在，当我悬停与该标记相关的列表项时，我想显示一个信息窗口。我已经测试了很多东西，但信息窗口从不显示。

我的物品是这样的<li class="shop" data-shop="markerId">

还有我的js：

function initShopsMap(shops, myLatlng) {
    createMap('map-canvas', myLatlng);

    var infoWindow = new google.maps.InfoWindow();

    for (var i = 0, length = shops.length; i < length; i++) {
        var data = shops[i],
            latLng = new google.maps.LatLng(data.latitude, data.longitude); 

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            id: data.id,
            name: data.name,
            slug: data.slug,
            infoWindow: infoWindow
         });

        (function(marker) {
            // Attaching a click event to the current marker
            google.maps.event.addListener(marker, 'click', function(e) {
                infoWindow.setContent(marker.name + ' ' + marker.slug);
                infoWindow.open(map, marker);
            });
                    //hover list item when hover a marker
            google.maps.event.addListener(marker, 'mouseover', function(e) {
                //todo scroll to
                $('.shop[data-shop="'+marker.id+'"]').addClass('active');
            });
            google.maps.event.addListener(marker, 'mouseout', function(e) {
                $('.shop[data-shop="'+marker.id+'"]').removeClass('active');
            });
        })(marker, data);
    }
}

如何添加$('.shop[data-shop="'+marker.id+'"]')显示相关信息窗口的事件？

编辑：解决的问题google.maps.event.trigger(markers[myPoint-1], "click");与 IIFE 配合得很好

4

2 回答 2

0

我认为这个答案可能是您正在寻找的。

不要使用 href 属性，而是使用 mouseover 事件来调用 show 函数。

于 2013-03-05T21:26:07.947 回答
0

使用 setter 属性来获得正确的参考，我认为标记 id 不会为它工作

add_markers: function(_locations,no_click){

        var handler = this;
        var map_options = handler.options;

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

        //add markers
        for (var i = 0; i < _locations.length; i++) {

            var marker = new google.maps.Marker({
            /////////////////////////////change tootip info here///////////////////////////////////////
                setter: i,
                title: _locations[i].address,
                position: new google.maps.LatLng(_locations[i].lat, _locations[i].lon),
                map: map
            });
            var marker_icon = new google.maps.MarkerImage(map_options.offc_icon.image);
            marker_icon.size = new google.maps.Size(map_options.offc_icon.width, map_options.offc_icon.height);
            marker_icon.anchor = new google.maps.Point(map_options.offc_icon.iconanchor[0],map_options.offc_icon.iconanchor[1]);
            marker.setIcon(marker_icon);

            handler.marker_initializer(marker, map, infowindow, "<p>"+ _locations[i].address + "</p>",no_click);  
        }
    },
    ////Set Marker
    marker_initializer: function(marker, map, infowindow, html,no_click) {

        var handler = this;


        if(!no_click)
        google.maps.event.addListener(marker, 'click', function() {
            lender_model.show_lenders(marker.setter);
        }); 
        google.maps.event.addListener(marker, 'mouseout', function() { 
            infowindow.close(); 
        }); 
    },
于 2013-03-05T21:44:31.190 回答