Question

我试图在谷歌地图上添加两个带有多个选项的选择菜单，但我不知道该怎么做。我确实将select元素放到了文档上，但它并没有放在google map的顶部。它在整个文档中创建了一个白色条。

理想情况下，我想知道如何使用这些菜单在Google地图上轻松实现选择菜单：

<select name="buildings" onchange="updateBuild(this.options[this.selectedIndex].value)">
   <option value="armory">The Armory</option>
   <option value="pillsbury">Pillsbury Hall</option>
   <option value="folwell">Folwell Hall</option>
   <option value="jones">Jones Hall</option>
   <option value="statue">Pillsbury Statue</option>
   <option value="wesbrook">Wesbrook Hall</option>
   <option value="nicholson">Nicholson Hall</option>
   <option value="eddy">Eddy Hall</option>
   <option value="music">Music Education</option>
   <option value="wulling">Wulling</option>
</select> 
<select name="transportation", onchange="updateTrans(this.options[this.selectedIndex].value)">
   <option value="driving">Driving</option>
   <option value="walking">Walking</option>
   <option value="bicycling">Bicycling</option>
   <option value="transit">Transit</option>
</select>

Answer 1

您可以将其添加为map-controls：

＆＃13;

function init() {
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: {
      lat: 0,
      lng: 0
    },
    zoom: 2,
    noClear: true
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementsByName('buildings')[0]);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementsByName('transportation')[0]);
}

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<div id="map_canvas">
  <select name="buildings" onchange="updateBuild(this.options[this.selectedIndex].value)">
    <option value="armory">The Armory</option>
    <option value="pillsbury">Pillsbury Hall</option>
    <option value="folwell">Folwell Hall</option>
    <option value="jones">Jones Hall</option>
    <option value="statue">Pillsbury Statue</option>
    <option value="wesbrook">Wesbrook Hall</option>
    <option value="nicholson">Nicholson Hall</option>
    <option value="eddy">Eddy Hall</option>
    <option value="music">Music Education</option>
    <option value="wulling">Wulling</option>
  </select>
  <select name="transportation"  onchange="updateTrans(this.options[this.selectedIndex].value)">
    <option value="driving">Driving</option>
    <option value="walking">Walking</option>
    <option value="bicycling">Bicycling</option>
    <option value="transit">Transit</option>
  </select>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=init"></script>

＆＃13;

将选择元素添加到谷歌地图上

1 个答案: