2016-07-30 61 views
0

我想本身在谷歌地圖API的角度用下面的代碼: HTML:的Javascript角谷歌地圖自動填充API不工作

<div ng-value="initMap()"> 
      <div> 
      <input id="pac-input" type="text" 
        value="{{event_foundaddress}}" ng-model="event_foundaddress"/> <!-- placeholder breaks EVERYTHING!!!! No placeholder!!!--> 
      </div> 

      <div id="map" style="width: 300px; height: 400px" > </div> 

      <div > Found address: {{event_foundaddress}} </div> 
     </div> 

JS /角

$scope.initMap = function() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: $scope.lat, lng: $scope.long},//london coords 
    zoom: 13 
    }); 
    $scope.foundaddress = $localStorage.event.address 
    var input = /** @type {!HTMLInputElement} */ 
     (document.getElementById('pac-input')); 
    //$scope.event_foundaddress 
    //alert('in:'+input) 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
    //var types = document.getElementById('type-selector'); 
    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(types); 
    //alert(input) 
    var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']}); 
    autocomplete.bindTo('bounds', map); 


    var infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
    map: map, 
    anchorPoint: new google.maps.Point(0, -29) 
    }); 


    autocomplete.addListener('place_changed', function() {... 


    } 

我InvalidValueError錯誤:不是來自var autocomplete = new google.maps.places.Autocomplete(input,{types:['geocode']});的HTMLInputElement實例。顯然,輸入不是HTMLInputElement。你知道如何從角度通過dom中的HTMLInputElement嗎?

編輯: 把警報('輸入')顯示輸入變量始終爲空......不知道爲什麼?

回答

1

我有同樣的問題,您必須在ng-focus的輸入元素上調用initMap()。然後它會工作。

但即使在更新我的代碼後,該問題仍未更新。然後我轉移到了angular-google-places-autocomplete庫。

而且這個庫很棒。退房https://github.com/kuhnza/angular-google-places-autocomplete

編輯:答案更新 你只需要如下寫的,一旦你選擇位置foundaddress將有谷歌的地方對象,從中你必須提取的formatted_address。

<input ng-model="foundaddress" type="text" id="pac-input" g-places-autocomplete></input> 
+0

如果我把<輸入的ID = 「PAC-輸入」 類型= 「文本」 NG對焦= 「initMap()」 值= 「{{event_foundaddress}}」 NG-模型= 「event_foundaddress」/> 。該代碼甚至沒有加載地圖 – ai20

+0

使用此,var map = new google.maps.Map(document.getElementById('pac-input')你dint傳遞正確的ID – Naveen

+0

我不認爲名稱是問題:'map'id是顯示地圖的地方,'pac-input'是自動完成應執行的地方 – ai20