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

セッター属性を使用して正しい参照を取得します。マーカー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 に答える