Question

似乎什么都没有用!!! 这是尝试之一：

我想在Google地图中搜索栏旁边的搜索按钮。布局和代码几乎是一致的：

<div class="row">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<button id ="searchspot" type="button" class="btn btn-info btn-sm controls">Search Me</button>
</div>
<div id="map-canvas"></div>

使用css：

#map-canvas {
height: 400px;
width: 100%;
}

.row{
display: table-row;
}

.controls {
   ..... (not important)
  }

#pac-input {
....
display: table-cell;
}

#pac-input:focus {
    border-color: #4d90fe;
}

#searchspot {
....
display: table-cell;
}

我也试过浮动和内联，它们都不起作用。请帮忙。

Answer 1

您可以使用jquery。

google.maps.event.addListenerOnce(map, 'idle', function(){
  //loaded fully

 $('#pac-input').after( '<button class="btn btn-default" type="submit">Button</button>' );

});

如果你想把html保留在js。

把它放在你的html中：

  <button id="MapButton" class="btn btn-default" type="submit">Button</button>

然后你只需使用id。

google.maps.event.addListenerOnce(map, 'idle', function(){
  //loaded fully

 $('#pac-input').after($('#MapButton'));

});

尝试在谷歌地图搜索旁边添加一个按钮：难以使用css和bootstrap对齐

1 个答案: