javascript - 如何在 Google map 信息窗口中添加地点自动完成框？

Question

我正在使用 Google Maps Javascript API v3，并且尝试在用户单击标记时出现的信息窗口内插入一个地点自动完成框。

我知道如何创建自动完成对象，并且知道如何创建仅接受文本输入的信息窗口，但我不知道如何将自动完成对象放入信息窗口中。

这是我尝试过的方法，但在这种情况下，我希望自动完成框所在的位置只是说“从以下位置获取路线:[object Object]”。这是在信息窗口内。

地址是我的标记的地址，工作正常。

这是我的代码片段:

    var autocomplete = new google.maps.places.Autocomplete();
    var infoWindowContent = [
      '<div id="directions-to-here"> Get directions from:',
      autocomplete,
      '<p> to: </p>' + address
    ].join('<br>');

    var infoWindowOptions = {
      content: infoWindowContent,
      position: position
    }
    var infoWindow = new google.maps.InfoWindow(toHereWindowOptions);
    infoWindow.open(map);

我还尝试通过在设置信息窗口内容后创建自动完成对象来解决问题，但没有成功:

var infoWindowContent = [
  '<div id="directions-to-here"> Get directions from:',
  '<input id="autocomplete" class="controls" type="text" 
  placeholder="Enter a starting location">',
  '<p> to: </p>' + address
].join('<br>');

var autocomplete = new google.maps.places.Autocomplete(
   /** @type {!HTMLInputElement} */ (
   document.getElementById('autocomplete')));

感谢您的帮助!

Answer 1

这可以通过在信息窗口中放置地点搜索框来完成。请参阅此处的地点搜索框文档:

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

首先设置内容字符串:

var contentString = '<input id="pac-input" class="controls" type="text" placeholder="Search Box">';

然后在打开信息窗口的标记的点击监听器内:

marker.addListener('click', function() {
infowindow.open(map, marker);
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
});

我修改了 Google 的 infowindow 示例 here在信息窗口中有一个搜索框，可以自动完成地址。请在此处查看我的 JSFiddle:

https://jsfiddle.net/dpx9o1mo/1/

请注意，为了安全起见，我已编辑了 API key 。请输入您自己的内容以使用此示例。

希望这会有所帮助!