2014-02-23 54 views
1

有沒有辦法來填表的負載從谷歌自動完成,如果我有一個實例的place.reference如果我在企業名稱中鍵入谷歌地圖API的地方自動填寫表單的onload

此代碼的工作,然後從列表中選擇一個,然後單擊它。

但我的問題的重要組成部分,是剛剛通過參考,並能夠獲得對填充於

<? 
    if(isset($_GET["ref"])){ 
    $ref=htmlspecialchars($_GET["ref"]); 
    echo $ref; 
    } 
?> 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script> 

<script type="text/javascript"> 
    function initialize() { 
     var input = document.getElementById('searchTextField'); 
     var autocomplete = new google.maps.places.Autocomplete(input); 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      var place = autocomplete.getPlace(); 
      document.getElementById('city2').value = place.name; 
      document.getElementById('cityLat').value = place.geometry.location.lat(); 
      document.getElementById('cityLng').value = place.geometry.location.lng(); 
      //alert("This function is working!"); 
      //alert(place.name); 
      // alert(place.address_components[0].long_name); 

     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<body> 
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /> 
<input type="text" id="city2" name="city2" /> 
<input type="text" id="cityLat" name="cityLat" /> 
<input type="text" id="cityLng" name="cityLng" /> 

EDITED提出以下建議(但不工作):

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script> 

<script type="text/javascript"> 
    function initialize() { 
     var input = document.getElementById('searchTextField'); 
     var autocomplete = new google.maps.places.Autocomplete(input); 
var request = { 
    reference: 'CnRtAAAAP2oQGVedOeA5z_XkX0-adnnl4hsGlSJNyuJIVEUeBnkrGcfzDw0z0Ffi7GsZBdYtx-Qmbu6ekzUpZpMwJDVVyNDOKwGsd-V5ff_Y9wN4McpGxLJ_u7reNwwlKOEtkoks4dtcpUcuu7w2hI_j0VtnYhIQtfEq0cHTD1Fl1OeL35pzIhoUE8A3wNPUB1jk5lvueDGqwtVpdbo' 
}; 
service = new google.maps.places.PlacesService(map); 
/* Here I get this Console Error: Uncaught ReferenceError: map is not defined */ 
service.getDetails(request, callback); 

function callback(place, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
      document.getElementById('city2').value = place.name; 
      document.getElementById('cityLat').value = place.geometry.location.lat(); 
      document.getElementById('cityLng').value = place.geometry.location.lng(); 
    } 
} 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<body> 
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /> 
<input type="text" id="city2" name="city2" /> 
<input type="text" id="cityLat" name="cityLat" /> 
<input type="text" id="cityLng" name="cityLng" /> 

回答

1

您可能會根據給定的參考文獻request the details並將自動完成的屬性設置爲返回對象(使用set-方法MVCObject,否則自動完成將無法識別更改)

只要設置了place-property,窗體字段(searchTextField除外)就應該自動填充。

searchTextField的值設置爲name - 返回對象的屬性。

的細節也可以通過webservice要求,當你喜歡一個服務器端解決方案(那麼你必須設置你自己的所有字段的值)

+0

您好,我更新了我的代碼,你的建議,但不能管理使其工作。 – Sebastian

+0

我不明白「MVCObject的設置方法」和「名稱屬性」。我無法在您的鏈接中看到此內容。 – Sebastian

+0

http://jsfiddle.net/doktormolle/A3ssa/ –