در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.
در جلسات قبلی دوستان زیادی درخواست کرده بودن که چطور میتونیم موقعیت خودمون رو درون نقشه گوگل تغییر بدیم و همون مکانی که قصد داریم رو به کاربران نمایش بدیم. برای این کار سایتهای زیادی وجود داره و همه اونا میتونه کار شما رو راه بندازه ولی در این مطلب یکی از بهترین سایتهای در این زمینه رو خدمت شما معرفی میکنم. سایتی که در این مطلب به آموزش اون میپردازیم، سایت MyGeoPosition هست. این سایت قابلیتهای زیادی رو داره و در این آموزش به تعدادی از قابلیتهای اون اشاره میکنیم.
در ابتدا که وارد سایت میشیم، یک نقشه در سایت وجود داره و همچنین در بالای سایت input و تب هایی قرار داره. در ابتدا تب Map فعال هست:
همونطور که در تصویر بالا دیدید اطلاعات نقطه ای در لندن مشخص شده. حالا من میخام برای مثال کاری کنم که موقعیت حرم مطهر شاهچراغ در شیراز رو مشخص کنم و عرض و طول جغرافیایی اون رو بدست بیارم. برای اینکار در ابتدا خیلی بزرگنمایی رو کم میکنیم تا بتونیم از قاره اروپا به قاره آسیا و کشور ایران بریم:
همونطور که دیدید با استفاده از فلش مشخص کردیم که مبدا و مقصد کجاس. حالا بر روی کشور ایران بزرگنمایی میکنیم تا به شهر شیراز برسیم و حرم مطهر شاهچراغ رو پیدا میکنیم:
حالا اگه بخایم Marker رو در این نقطه قرار بدیم و اطلاعات اون رو بدست بیاریم، باید روی نقطه مورد نظر کلیک راست کنید. با این کار Marker به این نقطه منتقل میشه و اطلاعات نقطه مورد نظر رو به ما میده:
میبینید که Marker قرار گرفته و اطلاعات رو به ما داده. حالا تنها کاری که باید بکنید اینه که اطلاعات رو کپی کنید. برای اینکار بعد از اینکه Marker رو در نقطه مورد نظر قرار دادید، بر روی دکمه Copy که در تصویر بالا مشخص کردم، کلیک کنید. با اینکار اطلاعات این نقطه در حافظه موقت قرار میگیره. اگر اون رو در جایی کپی کنید، چیزی بصورت زیر خواهد شد:
29.6093031,52.5435316 |
میبینید که دو عدد با تعداد ارقام اعشار زیاد که با استفاده از کاما از هم جدا شده اند رو به شما داده. حالا تنها کاری که کافیه انجام بدین اینه که این اطلاعات رو در google.maps.LatLng قرار بدین. با اینکار کدتون بصورت زیر میشه:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(29.6093031,52.5435316), zoom:18 }
var map = new google.maps.Map(document.getElementById("sample"),mapOptions); } </script>
</head>
<body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی هم بصورت زیر خواهد بود:
میبینید که نقطه ای که مشخص کردیم در مرکز نقشه خودمون قرار گرفته. دیدید که چه راحت میتونیم این کارو انجام بدیم. این سایت امکانات دیگه ای رو هم داره که خودتون میتونین با اونا کار کرده و یاد بگیرید.
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 317