Google Map Search Box APi，初始加载后搜索框不显示答案

【问题标题】：Google Map Search Box APi, searchbox not showing after initial loadGoogle Map Search Box APi，初始加载后搜索框不显示
【发布时间】：2014-02-05 11:04:24
【问题描述】：

所以我正在使用带有搜索框的谷歌地图 api

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

在我的 DOM 中，我有以下 html

<div id="mapdialog">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</div>

然后当用户点击我的“地图”按钮时调用 google API

$("#gMap,#gMapSide").click(function () {
    var geoUrl = "http://maps.googleapis.com/maps/api/geocode/json?address=" + county + "&sensor=true";
    $.ajax({
        url: geoUrl,
        context: document.body
    }).done(function (data) {
        ne = data.results[0].geometry.viewport.northeast;
        se = data.results[0].geometry.viewport.southwest;
        initialize(ne.lat, ne.lng, se.lat, se.lng);
    });
    return false;
});

当第一次点击 MAP 时，会显示搜索框。但是当用户第二次点击地图按钮时，地图仍然可以正常加载，但没有搜索框。

如果您查看 google 初始化代码，它会抓取盒子并将其推送到地图上

var input = /** @type {HTMLInputElement} */(
    document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

所以我认为这就是为什么没有搜索框第二次点击的原因，因为它已经从 DOM 中消失了？

欢迎提出任何建议！

【问题讨论】：

你能证明吗？就像在第一个按钮按下并刷新 html 后打开开发工具一样，输入是否从 DOM 中消失了？
是的，它消失了，它被推送到谷歌地图控制。但是第二次点击它甚至不再在谷歌地图控制中了

标签： jquery ajax google-maps

【解决方案1】：

我所做的是将 DOM 输入元素创建为一个简单的字符串，然后将其附加到您保存地图的分区中，在您的情况下为 #mapdialog。之后，可以使用document.getElementById() 简单地拾取它，并且可以将该元素作为输入提供给新的google.maps.places.SearchBox() 作为输入。看下面的sn-p。

    var pacinput = "<input id='pac-input' class='controls' type='text' placeholder='Search Box' />";
    $('#mapdialog').append(pacinput);
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

但是，太古提供的选项对我来说并不真正有效。在我的情况下触发了Uncaught typeError: Cannot read property 'zIndex' of undefined. 这可能是因为我在文档加载时将 javascript 编写为 PHP 字符串。不太确定具体原因。

【讨论】：

【解决方案2】：

答案少，解决方法多。如果您将控件包装在这样的 div 中：

<div id="inputWrapper">
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
</div>

那么你可以每次使用jQuery重新附加它吗？

$("#gMap,#gMapSide").click(function () {
    //Instantiate Variable
    var pac-input = '<input id="pac-input" class="controls" type="text" placeholder="Search Box">';
    //Append to element.
    pac-input.appendTo($('#inputWrapper'));
    var geoUrl = "http://maps.googleapis.com/maps/api/geocode/json?address=" + county + "&sensor=true";
    $.ajax({
        url: geoUrl,
        context: document.body
    }).done(function (data) {
        ne = data.results[0].geometry.viewport.northeast;
        se = data.results[0].geometry.viewport.southwest;
        initialize(ne.lat, ne.lng, se.lat, se.lng);
    });
    return false;
});

编辑

也许是一个更简单的解决方案，你能不能像这样将 jquery 对象而不是 dom 元素附加到 google 函数：

var pac-input = '<input id="pac-input" class="controls" type="text" placeholder="Search Box">';
var input = /** @type {HTMLInputElement} */(
    pac-input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

请注意，这是未经测试的，可能无法按预期工作。

另一个编辑

另一种选择是将原始元素克隆到地图调用中。

var input = /** @type {HTMLInputElement} */(
    document.getElementById('pac-input').clone());
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

希望其中一项有所帮助！

【讨论】：