Google地圖API無法在角度視圖中使用

我正嘗試使用Google地圖apis以獲取「地點」輸入框的簡單自動填充功能。我正在使用角度路由。Google地圖API無法在角度視圖中使用

以下的由谷歌開發者給出的說明，在主模板的<head>我：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
<script src="js/googleAutocomplete.js"></script>

其中googleAutocomplete.js是

function initializeGoogleApi() { 
    var input = document.getElementById('CityInput'); 
    var options = { 
     types: ['(cities)'] 
    }; 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 
}

和我有一個視圖

<input id="CityInput" type="text" name="place" ng-model="profile.place">

此輸入字段應該有autocompl ete服務來自Google apis，但它不起作用。

但是，如果我將輸入框放置在主模板中（即不在視圖中），自動完成功能將起作用。

我不知道在視圖中出了什麼問題。我試圖把onload="initializeGoogleApi()" 都放在body標記（主模板）中，並在外觀div的視圖中，沒有成功。

有什麼建議嗎？謝謝！

來源

2014-09-05 ZzKr

也許創建一個plunker或發佈最小工作代碼在這裏？ – alpinescrambler 2014-09-05 18:31:05

視圖中的html在選中之前不在DOM中，因此當正文的onload事件觸發時，輸入框不存在。輸入，初始化GoogleApi，爲空...

Onload不能在div上工作。見here。

我能得到它的唯一方法是將初始化放在該路由的控制器中。

來源

2014-09-05 19:40:59 marneborn

謝謝，現在我想我明白了這個問題。關於把初始化控制器，你的意思是這樣的： '$ scope.initialize =函數（）{...};' 和調用： '$ scope.initialize （）;'？如果是這樣，您將如何選擇輸入文本？ 'var input = document.getElementById（'CityInput'）;' 或者可能使用'ng-model'？ – ZzKr 2014-09-06 08:09:15

我把'$ scope.initialize = function（）{...};'，調用'$ scope.initialize（）;'當視圖加載。我用'document.getElementById（'CityInput'）。value;'獲得了輸入框的自動完成值。一切正常。 – ZzKr 2014-09-06 19:29:34

Google地圖API無法在角度視圖中使用

回答

相關問題