地图外的谷歌地图搜索框

Posted 2023-02-23

【中文标题】地图外的谷歌地图搜索框

【英文标题】：Google maps search box outside map

【发布时间】：2014-01-22 04:03:56

【问题描述】：

我正在使用 Google Maps API，并且我插入了一个带有自动完成功能的搜索表单。问题是输入框卡在地图中。我无法在地图外显示。

<div style=" margin-top:100px;background: #00a6d6; width: 100%; height:100px;"><input id="address" style="position:absolute; left:1000px;"  type="text"
        placeholder="Enter a location"></div>

<div>
<div id="map-canvas" style="height:500px; width:500px;"></div></div>

http://jsfiddle.net/KyMCy/1/ 看这里。我希望搜索框位于蓝色容器中。

谢谢。

【问题讨论】：

如果您不希望它“卡”在地图上，请不要将其设为控件。 jsfiddle.net/n9nTJ/1

@geocodezip 但是，我不能使用自动完成功能？

你为什么这么说？ jsfiddle.net/n9nTJ/2

你也可以查看这个：developers.google.com/maps/documentation/javascript/examples/…

查看演示：techtolia.com/GoogleMaps/index.html - 通过将模块集成到您的 Web 表单中，用户可以轻松选择地址，并且您可以轻松收集确切的地址详细信息。

【参考方案1】：

您只需要加载 Places 库。您甚至不需要显示地图。

new google.maps.places.Autocomplete(
  (document.getElementById('autocomplete')), 
    types: ['geocode']
  );

#autocomplete 
  width: 300px;

<input id="autocomplete" placeholder="Enter your address" type="text"></input>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

【讨论】：

搜索结果的回调在哪里？

【参考方案2】：

基本上，如果我理解得很好，您希望有一个带有自动完成功能的输入来更新 Google 地图。但是你想要它在地图之外

这一行是将您的输入绑定到地图的内容。你不需要它

map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

然后，您只需从输入中删除 left: 1000px 即可。

http://jsfiddle.net/KyMCy/5/

【讨论】：

这是正确答案。 MrUpsidown 的那个实际上是指“自动完成”api调用而不是“搜索框”。有显着差异-developers.google.com/maps/documentation/javascript/…

"问题是输入框卡在地图上，无法在地图外显示。"这就是我读到的问题。我想这个答案是他想要的。我投票赞成答案

优秀。感谢您的简洁回答。