Google map api v3 在单击外部元素时显示信息窗口答案

【问题标题】：Google map api v3 show infowindows when clicking on an external elementGoogle map api v3 在单击外部元素时显示信息窗口
【发布时间】：2013-03-05 21:17:23
【问题描述】：

我有一个功能性 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

【问题讨论】：

google.maps.event.trigger(markers[myPoint-1], "click");做这个把戏

标签： javascript jquery google-maps-api-3

【解决方案1】：

我认为this answer 可能是您正在寻找的。p>

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

【讨论】：

【解决方案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(); 
        }); 
    },

【讨论】：