Question

我正在使用Google Maps Javascript API v3，我正在尝试在用户点击标记时显示的InfoWindow中插入一个Places Autcomplete框。

我知道如何创建自动完成对象，我知道如何创建一个只接收文本输入的信息窗口，但我不知道如何将自动完成对象放入我的信息窗口。

这是我尝试过的，除此之外，但在这种情况下，我想要自动完成框的地方只是说＆＃34;获取路线来自： [object Object]＆＃34;。这是在InfoWindow中。

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

这是我的代码段：

    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的信息窗样本here，在infowindow中有一个自动填充地址的搜索框。请在这里查看我的JSFiddle：

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

注意我已经修改了我的API密钥以确保安全性。请输入您自己的样本。

我希望这有帮助！

如何在Google Maps InfoWindow中添加地方自动填充框？

1 个答案: