Question

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

我的商品与<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配合良好

Answer 1

我认为this answer可能就是你要找的东西。

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

Answer 2

使用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(); 
        }); 
    },

点击外部元素时，Google map api v3会显示infowindows

2 个答案: