2012-03-26 67 views
1

我有我目前的谷歌地圖代碼工作到點,如果我點擊側欄上的鏈接,一個標記事件被觸發,然後infowindow被打開。點擊標記時,我需要做什麼來突出顯示側欄上的塊?標記點擊高亮側欄塊

function createMarkers(point, username, st) { 
    var html = '<b>' + username + '</b> <br/> ' + st; 

    var marker = new google.maps.Marker({ 
     position: point, 
     map: map, 
     //zIndex: Math.round(point.lat()*-100000)<<5, 
     title: username 
    }); 

    //Closes any open infowindow while clicking on another marker 
    infowindow = new google.maps.InfoWindow(); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.close(); 
     infowindow.setContent(html); 
     infowindow.open(map, marker); 
    }); 

    markersArray.push(marker); 

    return marker; 
} 

當正在生成的標記,我也創造了側邊欄條目:

sidebar.innerHTML += '<span id="sidebarTxt">' 
            +'<a href="javascript:sidebar_click(' + i + ')">' 
            + '<b>' + name + '</b> </a> <br/> ' 
            + 'St: ' + st + '<br />' 
            + 'St Preference: ' + location + '<br />' 
            + 'Distance from me: ' + Number(distance).toFixed(2) + 'miles <br />' 
            +' </span>'; 

什麼我需要做的,突出的側欄塊被點擊標記時?

回答

4

修改click監聽器是這樣的:

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.close(); 
    infowindow.setContent(html); 
    infowindow.open(map, marker); 
    $("#sidebarTxt").toggleClass("new_style"); // this line adds the new_style to sidebarTxt span 
}); 

如果有一些風格

.new_style { 
    border: 1px solid red; 
} 
+0

我也發現了這個鏈接是非常有幫助的:歐洲航天局的谷歌地圖API V3實驗。與makeMarker側邊欄](http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar.htm) – JK0124 2012-03-28 22:03:50