javascript - 在 Google Places AutoComplete 中添加自定义默认位置

Question

我想使用 google places API 进行自动完成输入。这是我的代码:

var options = {
    componentRestrictions: {
      country: "de"
    }
  };
var place = '';

  var locationAutocompleteOneWay = document.getElementById('locationAutocompleteOneWay');
  var autocompleteLocationOneWay = new google.maps.places.Autocomplete(locationAutocompleteOneWay, options);
  google.maps.event.addListener(autocompleteLocationOneWay, 'place_changed', function() {
    place = autocompleteLocationOneWay.getPlace();
  });

对于更多自定义，我想在文本框中输入时添加一些自定义位置结果。这是我的代码和结果:

setTimeout(function() {
    $(".pac-container").append('<div id="areasearch" class="pac-item areasearch"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>Test place</span> <span>custom place</span></div>');
  }, 500);

但我希望当我点击结果时，它使我的输入 locationAutocompleteOneWay 具有结果值。但我不知道该怎么做。我希望它可以在页面上申请多输入。我通过 jQuery 和 AngularJS 使用它。 Jquery 和 AngularJS 的所有解决方案都适合我。提前致谢。

Answer 1

我发现，如果您加载要添加的自定义位置以及可用于设置纬度/经度(以及您需要的任何其他内容)的属性，那么您可以绑定(bind)到 mousedown 事件以分配一个自定义放置对象到自动完成。

在我的脚本中，我使用以下代码片段将一个项目添加到自动完成(这将添加到页面上的所有自动完成元素):

$(".pac-container").append('<div id="areasearch' + i + '" class="pac-item areasearch custom" val="' + PlaceName + '" lat="' + Latitude + '" lng="' + Longitude + '" style="display: none;"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>' + PlaceName + '</span> <span>' + LocationName + '</span></div>');

使用 pac-item 和 custom 类，然后我按如下方式绑定(bind):

        setTimeout(function () {
            $("div.pac-item.custom").mousedown(function () {
                setCustomLocation($(this));
            })
        }, 100);

自定义位置函数为:

 setCustomLocation = function (obj) {
        $("#" + currInput).val($(obj).attr("val"));
        var newObj = {};
        newObj["geometry"] = {}
        newObj["geometry"]["location"] = {}
        newObj["geometry"]["location"]["lat"] = function () { return $(obj).attr("lat"); }
        newObj["geometry"]["location"]["lng"] = function () { return $(obj).attr("lng"); }
        currAutocomplete.set("place", newObj);
    }

第一行将名称设置为事件输入字段，其余行为事件自动完成设置地点对象(其他事件中捕获的两个变量)。该项目唯一需要的值是几何纬度/经度对，但如果您需要更多，只需将需要从父级检索的任何值加载它即可。