谷歌地图api放置自动填充表单onload

时间:2014-02-23 17:50:36

标签: javascript google-maps-api-3 autocomplete

有没有办法从Google自动填充加载表单,如果我有例如place.reference

如果我输入商家名称,此代码有效,然后从列表中选择一个,然后点击它。

但我问题的关键部分是传递引用并能够填写for。

<?   
    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" />

编辑后的建议(但没有工作):

<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 个答案:

答案 0 :(得分:1)

您可以根据给定的引用request the details并将自动完成的place - 属性设置为返回的对象。(使用set - MVCObject的方法,否则自动完成将无法识别更改)

设置place-property后,应自动填写表单字段(searchTextField除外)。

searchTextField的值设置为返回对象的name - 属性。

当您更喜欢服务器端解决方案时,也可以通过webservice请求详细信息(然后您必须自行设置所有字段的值)