在ASP .Net中自动完成Google地图的TextBox [英] Autocomplete TextBox for Google Maps in ASP .Net
问题描述
亲爱的读者，
我使用Google地图显示来源和目的地。但我想使用自动完成功能，以便用户轻松搜索路径。我使用Google地图的内置功能进行自动填充。请查看以下功能：
Dear Reader,
I am using Google Maps for displaying Source and Destination. But I want to use AutoComplete so that it will ease user to search path easily. I am using built-in functionality of Google Maps for autocomplete. Kindly view the following function:
<script type="text/javascript">
function Initialize() {
var autocomplete = new google.maps.places.Autocomplete('<%=TextBox1.ClientID%>');
autocomplete.bindTo('bounds', '<%=GMap1.ClientID%>');
}
google.maps.event.addDomListener(window,'load',Initialize);
</script>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" Width="120px"></asp:TextBox>
<cc1:GMap ID="GMap1" runat="server" Height="240px" Width="570px" enableServerEvents="True" />
</form>
</body>
上述代码中的自动完成功能无效不知道为什么。我尝试了很多谷歌搜索，但不幸的是，当我与我的代码集成时，没有一个可以工作。
请指出错误来帮助我解决这个问题。
等待您的回复，
The AutoComplete in the above code is not working and don't know why. I have tried many google searches but unfortunately none works when I integrate with my code.
Please help me to resolve this problem by pointing out the mistake.
Waiting for your kind reply,
推荐答案
Please try this code:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
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('GMap1'), mapOptions);
var input = document.getElementById('TextBox1');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
});
}
google.maps.event.addDomListener(window, 'load', Initialize);
</script>
<input type="text" id="TextBox1">
<div id="GMap1" style="height: 240px; width:570px" ></div>
这篇关于在ASP .Net中自动完成Google地图的TextBox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
