在JavaScript中动态创建类似的Google地图地图控件

我试图创建一个类似于Google地图上的控件来显示不同的地图（地图，卫星，地形）。基本上，一个按钮的div，当我点击它时，它会显示一个复选框和一个按钮的下拉列表。我可以创建复选框的下拉列表，但我不能让div的行为像谷歌地图的控制。我错过了什么？在JavaScript中动态创建类似的Google地图地图控件

我的列表出现在“按钮”中，而不是下面。

这里是我的代码

function MyControl(controlDiv, map) { 

    controlDiv.style.padding = '5px'; 

    var controlUI = document.createElement('DIV'); 
    controlUI.style.backgroundColor = 'white'; 
    controlUI.style.borderStyle = 'solid'; 
    controlUI.style.borderWidth = '2px'; 
    controlUI.style.cursor = 'pointer'; 
    controlUI.style.textAlign = 'left'; 
    controlUI.title = 'Click to show'; 
    controlDiv.appendChild(controlUI); 

    var dropdown = document.createElement('DIV'); 
    dropdown.style.width = '100px'; 

    var chkOne = document.createElement("input"); 
    chkOne.type = "checkbox"; 
    chkOne.id = "chkOne"; 
    chkOne.value = "One"; 
    chkOne.checked = false; 
    var lblOne = document.createElement('label') 
    lblOne.htmlFor = "chkOne"; 
    lblOne.appendChild(document.createTextNode('One')); 

    var chkTwo = document.createElement("input"); 
    chkTwo.type = "checkbox"; 
    chkTwo.id = "chkTwo"; 
    chkTwo.value = "Two"; 
    chkTwo.checked = false; 
    var lblTwo = document.createElement('label') 
    lblTwo.htmlFor = "chkTwo"; 
    lblTwo.appendChild(document.createTextNode('Two')); 

    var btnDone = document.createElement("input"); 
    btnDone.type = "button"; 
    btnDone.name = "btnDone"; 
    btnDone.value = "Done"; 

    dropdown.appendChild(chkOne); 
    dropdown.appendChild(lblOne); 
    dropdown.appendChild(document.createElement("BR")); 
    dropdown.appendChild(chkTwo); 
    dropdown.appendChild(lblTwo); 
    dropdown.appendChild(document.createElement("BR")); 
    dropdown.appendChild(btnDone); 

    controlUI.appendChild(dropdown); 

    google.maps.event.addDomListener(controlUI, 'click', function() { 
    dropdown.visible = true; 
    }); 

    btnDone.addEventListener("click", showList, false); 

    function showList() { 
     dropdown.visible = false; 
    } 
} 


    // Create the DIV to hold the control and call the HomeControl() constructor 
    // passing in this DIV. 
    var accidentsToShowDiv = document.createElement('DIV'); 
    // Set CSS for the control border. 
    accidentsToShowDiv.style.backgroundColor = 'white'; 
    accidentsToShowDiv.style.borderStyle = 'solid'; 
    accidentsToShowDiv.style.borderWidth = '2px'; 
    accidentsToShowDiv.style.cursor = 'pointer'; 
    accidentsToShowDiv.style.textAlign = 'left'; 
    accidentsToShowDiv.title = 'Accidents to Show'; 

    var homeControl = new MyControl(accidentsToShowDiv, mainMap); 

    accidentsToShowDiv.index = 1; 
    mainMap.controls[google.maps.ControlPosition.TOP_RIGHT].push(accidentsToShowDiv);

来源

2012-03-05 polonskyg

-2

你忘了添加boxshadow

controlUI.style.boxShadow = '0 1px 3px rgba(0,0,0,0.5)';

来源

2014-04-13 10:09:47 gonggomedia

在JavaScript中动态创建类似的Google地图地图控件

回答

相关问题