Как изменить стили кнопок в элементе управления div в Google Maps? - PullRequest
Новая
       29

Как изменить стили кнопок в элементе управления div в Google Maps?

2 голосов
/ 12 марта 2012

Как получить элементы и изменить стили, нажимая кнопки на карте управления div? Мне нравится иметь такой же эффект на карте, как на кнопках в таблице.

Код: jsFiddle

Обновление:

С вашей помощью я получил ожидаемый результат: jsFiddle2

1 Ответ

2 голосов
/ 12 марта 2012

Я обновил ваш gMap.select здесь , он работает и надеюсь, что это то, что вы хотите. 

select: function (buttonId){
    gMap.buttons.$line.className="unselected";
    gMap.buttons.$placemark.className="unselected";
    document.getElementById(buttonId).className="selected";
    var divs=window.parent.frames[0].document.getElementsByTagName('div');
    for(i=0;i<divs.length;i++)
    {
        if(divs[i].id.charAt(0)=="c") divs[i].className="unselected";
    }
    var btn='c_'+buttonId;
    window.parent.frames[0].document.getElementById(btn).className="selected";
}

Обновление: Здесьэто обновленная скрипка. Надеюсь, что вы хотите это.

Обновления помечены // Обновление в скрипте.

Это еще один пример о том, как вы можете добавить пользовательский элемент управления и его обработчик событий на карту Google (с помощью Javascript) 

var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'));
map.setCenter(new google.maps.LatLng(48.77565,9.181802));
map.setZoom(12);
map.setMapTypeId( google.maps.MapTypeId.ROADMAP );

var controlDiv = document.createElement('div');
var table=document.createElement('TABLE');
var tbdy=document.createElement('TBODY');
var tr=document.createElement('TR');

var btn1=document.createElement('input');
btn1.setAttribute("type", "button");
btn1.id="c_placemark_b";
btn1.setAttribute("value", "Button One");
var td1=document.createElement('TD');
td1.appendChild(btn1);

var btn2=document.createElement('input');
btn2.setAttribute("type", "button");
btn2.id="c_line_b";
btn2.setAttribute("value", "Button Two");
var td2=document.createElement('TD');
td2.appendChild(btn2);

tr.appendChild(td1);
tr.appendChild(td2);
tbdy.appendChild(tr);
table.appendChild(tbdy);
controlDiv.appendChild(table);

google.maps.event.addDomListener(btn1, 'click', function() {
    //DoSomething
    alert(this.id);
});

google.maps.event.addDomListener(btn2, 'click', function() {
    //DoSomething
    alert(this.id);
});

controlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
}
...