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

Posted 2023-05-09

【中文标题】在 Google 地方信息自动完成中添加自定义默认地方

【英文标题】：Add Custom Default Places In Google Places AutoComplete

【发布时间】：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 的所有解决方案都对我有好处。提前致谢。

【问题讨论】：

你解决了这个问题吗？

【参考方案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 对，但如果您需要更多值，只需使用您需要从父级检索的任何值加载它。