Question

所以我在搜索框中使用谷歌地图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中消失了？

欢迎任何建议！

Answer 1

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

    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);

然而，Swires给出的选项并不适合我。在我的情况下触发了Uncaught typeError: Cannot read property 'zIndex' of undefined.这可能是因为我在文档加载时将javascript写为PHP字符串。不确定的确切原因。

Answer 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);

希望其中一个有帮助！

谷歌地图搜索框APi，初始加载后搜索框未显示

2 个答案: