Question

我正在运行HTML数据中的谷歌地图，我真的需要能够点击行（div）来打开相关标记。我希望在.each()函数中添加一个onclick但我无法得到任何我尝试过的东西。

基本上，如果点击每一行可以打开相关的信息窗口，它将解决我的所有问题：）

非常感谢帮助。

<script type="text/javascript" language="javascript">
        var infowindow = new google.maps.InfoWindow();
        var myOptions = {
           zoom: 4,
           center: new google.maps.LatLng(-40.900557, 174.885971),
           mapTypeId: google.maps.MapTypeId.ROADMAP,
           disableDefaultUI: true
        };
        var icon = "img/marker.png";
        $(function() {
            map = new google.maps.Map(document.getElementById("map"), myOptions);
            // grab data attributes from html
            $('.row').each(function( index ){
                var rLat = $(this).data("coordinates").lat;
                var rLong = $(this).data("coordinates").long;
                var rTitle = $(this).find('.itemtitle a').html();
                var rTel = $(this).find('.tel').html();
                var rAdd = $(this).find('.add').html();
                var contentString = '<div style="text-align:left"><h4 style="color:#0068a6;font-size:16px;margin:0px 0px 10px 0px;">' + rTitle + '</h4><strong>' + rTel + '</strong><br /><br />' + rAdd + '</div>';
                var myLatLng = new google.maps.LatLng( rLat, rLong );
                var otherMarkers = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: icon
                });
                // click actions
                google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) {
                    return function() {
                        infowindow.setContent( contentString );
                        infowindow.open( map, otherMarkers );
                    }
                })(otherMarkers, index));               
            });
        });

        $(function() {
            $(".leftblock .ctrlholder:nth-child(2)").addClass("last");
            $(".leftblock .ctrlholder:nth-child(3)").addClass("last");
        });
    </script>

HTML

<div class="row" data-coordinates='{"lat" : -41.407493, "long" : 174.584122}'>
    <h4 class="itemtitle"><a href="">Title</a></h4>
    <p class="centralregion">Address</p>
    <ul>
        <li class="add">Post Address</li>
        <li class="tel">tel</li>
    </ul>
    <span class="filter3"></span>
</div>

提前致谢。

Answer 1

由于您已经遍历所有行以创建标记，因此您可以为每个点击标记的行添加点击处理程序

添加标记事件侦听器后

：

 google.maps.event.addListener(otherMarkers......);

添加触发标记点击的行点击处理程序：

/* "this" is the row instance*/
$(this).click(function(){
 google.maps.trigger( otherMarkers ,'click')
})

Answer 2

以下方法稍微复杂，但具有记忆经济的优点。

$(function() {
    var myOptions = {
       zoom: 4,
       center: new google.maps.LatLng(-40.900557, 174.885971),
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       disableDefaultUI: true
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    var infowindow = new google.maps.InfoWindow();
    var icons = {
        'dflt': "../images/map_icons/beach-certified.png",
        'selected': "../images/map_icons/harbour-guest.png"
    };
    var infoTemplate = '<div style="text-align:left"><h4 style="color:#0068a6;font-size:16px;margin:0px 0px 10px 0px;">%Title</h4><strong>%Tel</strong><br /><br />%Add</div>';
    var seletedMarker = null;

    //Function for composing the info string on the fly.
    //This avoids needing to store fully composed info strings in a closure,
    //on the offchance that they will be viewed.
    function composeInfoString(row) {
        var $row = $(row);
        return infoTemplate
            .replace('%Title', $row.find('.itemtitle a').html())
            .replace('%Tel', $row.find('.tel').html())
            .replace('%Add', $row.find('.add').html());
    }

    //closure-forming function to trap row and marker
    function clickHandler(row, marker) {
        return function() {
            if(seletedMarker) {
                seletedMarker.setIcon(icons.dflt);//revert seletedMarker's icon to .dflt
            }
            infowindow.setContent( composeInfoString(row) );
            infowindow.open( map, marker );
            marker.setIcon(icons.selected);//Set marker's icon to .seleted
            seletedMarker = marker;//Remember the currently selected marker so it can be reverted to default next time round.
        };
    }

    $('.row').each(function( index, row ) {
        var $row = $(row);
        var coords = $row.data("coordinates");
        //console.log([coords.lat, coords.lng].join());
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng( Number(coords.lat), Number(coords.lng) ),
            icon: icons.dflt,
            map: map
        });
        var fn = clickHandler(row, marker);
        google.maps.event.addListener(marker, 'click', fn);
        $row.data('clickFn', fn);//associate fn with row.
    });

    //Delegate handling of row clicks upward (to closest common row container).
    $(document).on('click', '.row', function() {
        var fn = $(this).data('clickFn');
        if(fn) fn();//this is the functionality you seek
    });
});

经济是双重的：

通过动态编写信息字符串，您可以避免在闭包中存储完全组合的信息字符串（每个标记/行一个），因为它们很可能会被查看。
通过将fn（实际上，＆＃34;闭包＆＃34;）作为.data()项附加到每一行，并向上委派点击处理，您可以利用相同的闭包时使用直接单击标记，而不需要为每个标记/行添加额外的函数包装。

这种经济在使用许多标记时可能很重要，否则不会造成伤害。

此外，您可以考虑将坐标经度属性从long更改为lng。在代码中，这将避免.long，这可能会在某些浏览器中出现问题。 long是许多基础语言关键字之一，应该作为js对象属性标识符来避免。

修改

现已测试 - 请参阅updated fiddle。上面反映了各种修正。

编辑2

修改代码以换出所选标记图标 - 请参阅updated fiddle。

jQuery谷歌地图 - 点击打开infowindow

2 个答案:

修改

编辑2