javascript - 在javascript中动态创建类似谷歌地图的 map 控件

Question

我正在尝试创建一个类似于谷歌地图上的控件来显示不同的 map ( map 、卫星、地形)。基本上，一个类似按钮的 div，当我单击它时，它会显示一个复选框和按钮的下拉列表。我可以创建复选框的下拉列表，但我无法使 div 的行为像谷歌地图的控件一样。 我错过了什么？

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

这是我的代码

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

Answer 1

您忘记添加 boxshadow

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