jQuery谷歌地图 - 点击打开infowindow [英] jQuery Google Maps - open infowindow on click

问题描述

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

基本上，如果点击每行可以打开相关的infowindow，它将解决我所有的问题：

帮助将不胜感激。

 < script type =text / javascriptlanguage =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）; 
 //从html获取数据属性
 $（'。row'）。each（function（index）{
 var rLat = $（this）.data（coordinates）。lat; 
 var rLong = $（this）.data （坐标））。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>'+ rTel +'< / strong>>< br />< br />'+ rAdd +'< / div>'; 
 var myLatLng = new google.maps.LatLng（rLat，rLong）; 
 var otherMarkers = new google.maps.Marker（{
位置：myLatLng，
 map：地图，
图标：图标
}）; 
 //点击动作
 google.maps.event.addListener（otherMarkers，'click'，（function（otherMarkers，index）{
 return function（）{
 infowindow.setContent （contentString）; 
 infowindow.open（map，otherMarkers）; 
} 
}）（otherMarkers，index））; 
}）; 
}）; 
 $ b $（函数（）{
 $（。leftblock .ctrlholder：nth-​​child（2））。addClass（last）; 
 $（。 leftblock .ctrlholder：nth-​​child（3））。addClass（last）; 
}）; 
< / script> 
  

HTML

 < div class =rowdata-coordinates ='{lat：-41.407493，long：174.584122}'> 
< h4 class =itemtitle>< a href =>标题< / a>< / h4> 
< p class =centralregion>地址< / p> 
< ul> 
< li class =add>发布地址< / li> 
< li class =tel> tel< / li> 
< / ul> 
< span class =filter3>< / span> 
< / div> 
  

预先致谢。

解决方案

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

添加标记事件监听器：

  google.maps.event.addListener（otherMarkers ......）; 
  

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

  / *this是行实例* / 
 $（this）.click（function（）{
 google.maps.trigger otherMarkers，'点击'）
}）
  

I am running a google map from HTML data and I really need to be able to click on rows (divs) to open the relevant marker. I was hoping to add an onclick within an .each() function but I cant get anything I have tried to work.

Basically if clicking on each row could open the relevant infowindow it would solve all my problems :)

Help would be much appreciated.

<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>

Thanks in advance.

解决方案

Since you already loop over all the rows to create markers you can add a click handler to each row that will click on the marker

after adding marker event listener:

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

Add a row click handler that triggers a marker click:

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

这篇关于jQuery谷歌地图 - 点击打开infowindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！