在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

我发现，如果您加载要添加的自定义位置以及可用于设置纬度/经度（以及您需要的任何其他内容）的属性，那么您可以绑定到 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 类，然后按如下方式绑定：

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

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