谷歌地图 api 地方自动填充表单 onload答案

【问题标题】：google maps api places autofill form onload谷歌地图 api 地方自动填充表单 onload
【发布时间】：2014-02-24 04:05:11
【问题描述】：

如果我有例如 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" />

【问题讨论】：

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

【解决方案1】：

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

一旦设置了 place-property，表单域（searchTextField 除外）就会自动填充。

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

如果您更喜欢服务器端解决方案，也可以通过webservice 请求详细信息（然后您必须自己设置所有字段的值）

【讨论】：

您好，我根据您的建议更新了我的代码，但无法使其正常工作。
我不明白“MVCObject 的设置方法”和“名称属性”。我在你的链接上看不到这个。
MVCObject 是大多数google.maps-objects 的基类：developers.google.com/maps/documentation/javascript/…
非常感谢代码和参考资料，我永远也想不通。