1

HTML データから Google マップを実行していますが、関連するマーカーを開くには行 (div) をクリックできる必要があります。関数内に onclick を追加したいと思っていましたが、.each()機能しようとしたものは何も得られません。

基本的に、各行をクリックして関連する情報ウィンドウを開くことができれば、すべての問題が解決します:)

助けていただければ幸いです。

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

前もって感謝します。

4

2 に答える 2

1

すでにすべての行をループしてマーカーを作成しているため、マーカーをクリックする各行にクリック ハンドラーを追加できます。

マーカー イベント リスナーを追加した後:

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

マーカー クリックをトリガーする行クリック ハンドラーを追加します。

/* "this" is the row instance*/
$(this).click(function(){
 google.maps.trigger( otherMarkers ,'click')
})
于 2013-03-03T23:47:53.543 に答える
0

次のアプローチは少し複雑ですが、メモリを節約できるという利点があります。

$(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
    });
});

経済は 2 つあります。

  • その場で情報文字列を構成することにより、完全に構成された情報文字列をクロージャー (マーカー/行ごとに 1 つ) に格納する必要がなくなります。
  • fn各行に (実用的に言えば「クロージャー」) を項目としてアタッチし.data()、クリック処理を上に委譲することで、マーカー/行ごとに追加の関数ラッパーを必要とせずに、マーカーを直接クリックするときに使用されるのと同じクロージャーを利用できます。

これらの種類の経済は、多くのマーカーを扱う場合に重要であり、それ以外の場合は害を及ぼすことはありません.

また、座標の経度プロパティを からlongに変更することを検討してくださいlng。コードでは、これにより が回避.longされ、一部のブラウザで問題が発生する可能性があります。longjs オブジェクトのプロパティ識別子として避けるべき多くの基本的な言語キーワードの 1 つです。

編集

テスト済み -更新された fiddleを参照してください。さまざまな修正が上記に反映されています。

編集 2

選択したマーカー アイコンをスワップアウトするように変更されたコード -更新された fiddleを参照してください。

于 2013-03-04T01:46:39.220 に答える