Question

我正在尝试创建一个像谷歌地图上的控件来显示不同的地图（地图，卫星，地形）。基本上，一个类似按钮的div，当我点击它时，它会显示一个复选框和一个按钮的下拉列表。我可以创建复选框的下拉列表，但我不能让div表现得像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);

Answer 1

您忘了添加boxshadow

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

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

1 个答案: