在谷歌地方添加自定義默認位置自動完成

Question

我想使用谷歌地方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-項目和自定義，我然後綁定如下：

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

第一行將名稱設置爲活動輸入字段，其餘行將設置活動自動填充的位置對象（在其他事件中捕獲這兩個變量）。我需要的項目的唯一值是幾何經緯度/對數，但如果您需要更多，只需使用您需要從父項檢索的任何值加載它。