تبدیل موقعیت جغرافیایی گوگل به تصویر توسط API V3

موقعیت جغرافیایی گوگل

در این مقاله به شما آموزش می دهیم، که چگونه موقعیت جغرافیایی گوگل را با استفاده از API V3 به عکس صادر، ذخیره و تبدیل کنیم. API V3 یک نقشه ایستا و ساکن جهت صادر، ذخیره و تبدیل مپ به عکس می باشد.

موقعیت جغرافیایی گوگل

تکه کد زیر شامل یک ردیف نشانگر از آدرس محل های جغرافیایی مختلف می باشد. هر نشانگر در ردیف شامل موضوع، عرض جغرافیایی، طول جغرافیایی و توضیحات محل می باشد.

در درون پنجره onload event handler، قابلیت LoadMap اجرا می شود.

یک حلقه در میان ردیف نشانگر اجرا می شود و به صورت تک تک هر نشانگر در گوگل مپ ساکن می شود.

زیر نقشه گوگل، یک دکمه HTML به همراه یک Click event handler جاوا اسکریپت ساکن می شود. زمانی که روی دکمه کلیک شود، ویژگی های نقشه گوگل ماننده مرکز، سایز، زوم و نوع نقشه از mapOptions object آماده می شود و به API V3 اضافه می شود.

سپس یک حلقه در میان یک نشانگر و جزئیات آدرس محل های جغرافیایی آن و طول و عرض جغرافیایی اجرا می شوند و مقادیر آنها به API V3 اضافه می شود.

در نهایت URL به عنوان سورس به یک HTML IMG element که تصاویر نقشه گوگل را نمایش می دهد تنظیم می شود.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var markers = [
    {
        "title": 'Aksa Beach',
        "lat": '19.1759668',
        "lng": '72.79504659999998',
        "description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
    },
    {
        "title": 'Juhu Beach',
        "lat": '19.0883595',
        "lng": '72.82652380000002',
        "description": 'Juhu Beach is one of favourite tourist attractions situated in Mumbai.'
    },
    {
        "title": 'Girgaum Beach',
        "lat": '18.9542149',
        "lng": '72.81203529999993',
        "description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.'
    },
    {
        "title": 'Jijamata Udyan',
        "lat": '18.979006',
        "lng": '72.83388300000001',
        "description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.'
    },
    {
        "title": 'Sanjay Gandhi National Park',
        "lat": '19.2147067',
        "lng": '72.91062020000004',
        "description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'
    }
    ];
    window.onload = function () {
        LoadMap();
    }
    var map, mapOptions;
    function LoadMap() {
        mapOptions = {
            center: new google.maps.LatLng(19.0883595, 72.82652380000002),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
 
        for (var i = 0; i < markers.length; i++) {
            var data = markers[i];
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
        }
    };
    function Export() {
        //URL of Google Static Maps.
        var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap";
 
        //Set the Google Map Center.
        staticMapUrl += "?center=" + mapOptions.center.G + "," + mapOptions.center.K;
 
        //Set the Google Map Size.
        staticMapUrl += "&size=220x350";
 
        //Set the Google Map Zoom.
        staticMapUrl += "&zoom=" + mapOptions.zoom;
 
        //Set the Google Map Type.
        staticMapUrl += "&maptype=" + mapOptions.mapTypeId;
 
        //Loop and add Markers.
        for (var i = 0; i < markers.length; i++) {
            staticMapUrl += "&markers=color:red|" + markers[i].lat + "," + markers[i].lng;
        }
 
        //Display the Image of Google Map.
        var imgMap = document.getElementById("imgMap");
        imgMap.src = staticMapUrl;
        imgMap.style.display = "block";
    }
</script>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="dvMap" style="width: 220px; height: 350px">
            </div>
        </td>
        <td>
            &nbsp;
            &nbsp;
        </td>
        <td>
            <img id="imgMap" alt="" style="display: none" />
        </td>
    </tr>
</table>
<br />
<input type="button" id="btnExport" value="Export" onclick="Export()" />

موفق باشید !

  • پسورد: www.mspsoft.com
محمد نجفی

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.