地方資訊自動完成

来源：互联网发布：java自动按键编辑：程序博客网时间：2024/06/06 15:52
<!DOCTYPE html> <html DIR="LTR"> <head>   <title>Google Maps JavaScript API 第 3 版範例：地方資訊自動完成</title>   <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"     type="text/javascript"></script>   <style type="text/css">     body {       font-family: sans-serif;       font-size: 14px;     }     #map {       height: 400px;       width: 600px;       margin-top: 0.6em;     }     input:focus {       outline: none;     }   </style>   <script>     function initialize() {       var mapOptions = {         center: new google.maps.LatLng(-33.8688, 151.2195),         zoom: 13,         mapTypeId: google.maps.MapTypeId.ROADMAP       };       var map = new google.maps.Map(document.getElementById('map'), mapOptions);       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(); map.setCenter(place.geometry.location); });     }     google.maps.event.addDomListener(window, 'load', initialize);   </script> </head> <body>   <div>     <input id="searchTextField" type="text" value="杭州" size="50">  </div>   <div id="map"></div> </body> </html>