در این مقاله به شما آموزش می دهیم که چگونه موقعیت مکانی با AutoComplete را در نقشه گوگل بدست آورید. به علاوه در این مقاله هم چنین توضیح می دهیم که چگونه از Place changed event handler گوگل استفاده می کنیم.
موقعیت مکانی با AutoComplete
اجرای Google Places Autocomplete بدون استفاده از نقشه گوگل
HTML Markup شامل یک TextBox HTML می باشد و با استفاده از Google Places Autocomplete اجرا می شود. در ابتدا لازم است که اسکریپت API نقشه گوگل را به همراه places library بگیرید. Google Places Autocomplete در TextBox درون پنجره load event handler اجرا می شود و place_changed event handler به آن اختصاص داده می شود.
زمانی که یک place در Google Places Autocomplete TextBox انتخاب شود place_changed event handler اجرا می شود. ابتدا place انتخاب شده را و سپس آدرس تعیین شده و مختصات محل و طول و عرض جغرافیایی خود را می گیرد و در نهایت جزئیات را در یک پیام اخطار JavaScript نمایش می دهد.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
var address = place.formatted_address;
var latitude = place.geometry.location.A;
var longitude = place.geometry.location.F;
var mesg = "Address: " + address;
mesg += "\nLatitude: " + latitude;
mesg += "\nLongitude: " + longitude;
alert(mesg);
});
});
</script>
<span>Location:</span>
<input type="text" id="txtPlaces" style="width: 250px" placeholder="Enter a location" />
</body>
</html>
موفق باشید !
هیچ دیدگاهی نوشته نشده است.