在Google地方信息自动填充中添加自定义默认位置

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

我发现，如果您加载自定义位置，并添加了可用于设置lat / lng（以及您需要的任何其他内容）的属性，那么您可以将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);
    }

第一行将名称设置为活动输入字段，其余行设置活动自动完成的位置对象（在其他事件中捕获的两个变量）。我需要的唯一值是几何lat / lng对，但如果你需要更多，只需加载你需要从父级检索的任何值。