<!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>
地方資訊自動完成
最新推荐文章于 2024-11-17 20:16:29 发布
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
