Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图api将自动填充表单置于加载状态

Javascript 谷歌地图api将自动填充表单置于加载状态

javascript google-maps-api-3 autocomplete

Javascript 谷歌地图api将自动填充表单置于加载状态,javascript,google-maps-api-3,autocomplete,Javascript,Google Maps Api 3,Autocomplete,如果我有place.reference，有没有办法在从google自动完成加载时填写表单 如果我输入企业名称，然后从列表中选择一个，然后单击它，则此代码可以工作 但我的问题的关键部分，是通过参考资料，并能够得到所需的信息 <? if(isset($_GET["ref"])){ $ref=htmlspecialchars($_GET["ref"]); echo $ref; } ?> <script src="http://maps.googl

如果我有place.reference，有没有办法在从google自动完成加载时填写表单

如果我输入企业名称，然后从列表中选择一个，然后单击它，则此代码可以工作

但我的问题的关键部分，是通过参考资料，并能够得到所需的信息

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


函数初始化（）{
var input=document.getElementById（'searchTextField'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place=autocomplete.getPlace（）；
document.getElementById（'city2'）。value=place.name；
document.getElementById（'cityla'）。value=place.geometry.location.lat（）；
document.getElementById（'cityLng'）。value=place.geometry.location.lng（）；
//警报（“此功能正在工作！”）；
//警报（地点、名称）；
//警报（place.address\u组件[0]。long\u名称）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
编辑以下建议（但不起作用）：


函数初始化（）{
var input=document.getElementById（'searchTextField'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
var请求={
参考资料：“CNRTAAAP2OQGVEDOEA5ZāXkX0-adnnl4hsGlSJNyuJIVEUeBnkrGcfzDw0z0Ffi7GsZBdYtx-QMBU6EKZUPZPMWJDVYNDOKWGSD-V5ff(Y9wN4McpGxLJ)Y9WN4MCPGU7W2HI(J0VTNYQTFEQ0CHTD1FL1帮助35PZIHOUE8W5WNPU1W5W5KW5W5Lvg1W5CPGXL5VPDBO”
};
服务=新的google.maps.places.PlacesService（地图）；
/*这里我得到了这个控制台错误：uncaughtreferenceerror:map没有定义*/
获取详细信息（请求、回调）；
函数回调（位置、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
document.getElementById（'city2'）。value=place.name；
document.getElementById（'cityla'）。value=place.geometry.location.lat（）；
document.getElementById（'cityLng'）。value=place.geometry.location.lng（）；
}
}
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
您可以基于给定的引用，为返回的对象设置自动完成的
place
-属性。（使用
MVCObject
的
set
-方法，否则自动完成将无法识别更改）

设置place属性后，表单字段（searchTextField除外）将自动填充

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

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

您好，我根据您的建议更新了代码，但无法使其正常工作。我不理解“设置MVCObject方法”和“名称属性”。我在你的链接上看不到这一点。MVCObject是大多数
google.maps
-对象的基类：非常感谢代码和引用，我永远不会明白这一点。 
<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" />