在 Google 地方信息自动完成中添加自定义默认地方答案

【问题标题】：Add Custom Default Places In Google Places AutoComplete在 Google 地方信息自动完成中添加自定义默认地方
【发布时间】：2016-07-26 13:54:58
【问题描述】：

我想使用 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 的所有解决方案都对我有好处。提前致谢。

【问题讨论】：

你解决了这个问题吗？

标签： javascript jquery angularjs

【解决方案1】：

我发现，如果您使用可用于设置 lat/lng（以及您需要的任何其他内容）的属性加载要添加的自定义位置，那么您可以绑定到 mousedown 事件以分配自定义放置对象到自动完成。

在我的脚本中，我有以下 sn-p 向自动完成添加项目（这会添加到页面上的所有自动完成元素）：

$(".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 对，但如果您需要更多值，只需使用您需要从父级检索的任何值加载它。

【讨论】：