توضیحات و دانلود

نقشه Google Geomap API در ASP.Net ( قسمت اول )
0 0
نقشه Google Geomap API در ASP.Net ( قسمت اول )

با سلام در این مقاله توضیح می دهیم که چگونه از Google Geomap در بخشی از API ویژوال بیسیک گوگل در یک برنامه ASP.Net استفاده می شود.   Google Geomap ابزار خوبی برای نمایش آمار جغرافیایی از طریق نقشه های تعاملی فلش است

در این مقاله از jQuery استفاده خواهیم کرد تا نقشه را با داده های آماری ناهمگام بارگذاری کنیم.

مجوزها

با استفاده از لینک زیر، کتابخانه جی کوئری را دانلود کنید.دانلود جی کوئری
حالا اسکریپت های زیر را به بخش سر صفحه وب یا صفحه اصلی اضافه کنید.

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type='text/javascript' src='http://www.google.com/jsapi'></script>

<script src='http://maps.google.com/maps?file=api&v=2&key=ABCDEFG' type='text/javascript'></script>

توجه:

کلید API در localhost نیازی نیست، اما هنگامی که شما آن را در سرور آپلود میکنید، باید یکی از گوگل را دریافت کنید، در غیر این صورت کار نمی کند

ایجاد کلاس DTO

اکنون یک کلاس DTO (Objects Transfer Data) به نام کشور ایجاد می کنیم که داده های آماری آن کشور را ذخیره می کنیم .

C #

public class Countries

{

    string _Country;

    int _Popularity;

    public string Country

    {

        get

        {

            return _Country;

        }

        set

        {

            _Country = value;

        }

    }

 

    public int Popularity

    {

        get

        {

            return _Popularity;

        }

        set

        {

            _Popularity = value;

        }

    }

}

VB.Net

Public Class Countries

    Private _Country As String

    Private _Popularity As Integer

    Public Property Country() As String

        Get

            Return _Country

        End Get

        Set(ByVal value As String)

            _Country = value

        End Set

    End Property

 

    Public Property Popularity() As Integer

        Get

            Return _Popularity

        End Get

        Set(ByVal value As Integer)

            _Popularity = value

        End Set

    End Property

End Class

جمع آوری داده ها برای نقشه

حالا داده ها را برای نقشه پر می کنیم. ابتدا باید فضای نامهای زیر را وارد کنید

C #

using System.Collections.Generic;

using System.Web.Script.Services;

using System.Web.Services;

VB.Net

Imports System.Collections.Generic

Imports System.Web.Script.Services

Imports System.Web.Services

یک روش ساده ایجاد کرده ایم که آرایه لیستی از اشیاء کلاس کشور را ایجاد می کند و آرایه لیست را باز می گرداند.

C #

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

[WebMethod]

public static List<Countries> CreateWorldMap()

{

    List<Countries> countries = new List<Countries>();

 

    countries.Add(new Countries());

    countries[0].Country = "India";

    countries[0].Popularity = 3000;

 

    countries.Add(new Countries());

    countries[1].Country = "United States";

    countries[1].Popularity = 2500;

 

    countries.Add(new Countries());

    countries[2].Country = "Russia";

    countries[2].Popularity = 2100;

 

    countries.Add(new Countries());

    countries[3].Country = "Canada";

    countries[3].Popularity = 1700;

 

    countries.Add(new Countries());

    countries[4].Country = "United Kingdom";

    countries[4].Popularity = 1600;

 

    countries.Add(new Countries());

    countries[5].Country = "France";

    countries[5].Popularity = 1200;

 

    return countries;

}

VB.Net

<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _

<WebMethod()> _

Public Shared Function CreateWorldMap() As List(Of Countries)

   Dim countries As New List(Of Countries)()

 

   countries.Add(New CountriesVB())

   countries(0).Country = "India"

   countries(0).Popularity = 3000

 

   countries.Add(New CountriesVB())

   countries(1).Country = "United States"

   countries(1).Popularity = 2500

 

   countries.Add(New CountriesVB())

   countries(2).Country = "Russia"

   countries(2).Popularity = 2100

 

   countries.Add(New CountriesVB())

   countries(3).Country = "Canada"

   countries(3).Popularity = 1700

 

   countries.Add(New CountriesVB())

   countries(4).Country = "United Kingdom"

   countries(4).Popularity = 1600

 

   countries.Add(New CountriesVB())

   countries(5).Country = "France"

   countries(5).Popularity = 1200

 

   Return countries

End Function

همانطور که متوجه شدید روشی را به صورت استاتیک (در VB.Net به اشتراک گذاشته شده) اعلام کرده ایم تا بتوانید با استفاده از کتابخانه جی کوئری دسترسی پیدا کنید. تابع AJAX جی کوئری به سادگی این تابع را فراخوانی می کند و آرایه لیست را به عنوان سمت سرویس گیرنده آرایه JSON دریافت می کند. برای دیدن این که چگونه کار می کند، کد زیر را مراجعه کنید

ارتباط با تابع سمت سرور با استفاده از jQuery

<script type='text/javascript'>

    google.load('visualization', '1', {'packages': ['geomap']});

    google.setOnLoadCallback(OnLoad);

    function OnLoad() {

        $.ajax({

            type: "POST",

            url: "CS.aspx/CreateWorldMap",

            data: '{}',

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: DrawWorldMap

        });

    }

 </script>

همانطور که متوجه شدید، وقتی از API Google  بارگزاری می شود، عملکرد OnLoad را فرا می گیریم . این تابع صرفا ارتباط AJAX را به تابع CreateWorldMap می دهد که آرایه لیست را به آن بازگرداند. هنگامی که پاسخ دریافت می شود، روش موفقیت DrawWorldMap نامیده می شود که Google Geomap را با استفاده از داده های آماری دریافت شده از سرور ترسیم می کند.

نقشه Google Geomap را طراحی کنید

 

 

<script type='text/javascript'>

    function DrawWorldMap(response) {

        var data = new google.visualization.DataTable();

        data.addRows(response.d.length);

        data.addColumn('string', 'Country');

        data.addColumn('number', 'Popularity');

        for (var i = 0; i < response.d.length; i++) {

            data.setValue(i, 0, response.d[i].Country);

            data.setValue(i, 1, response.d[i].Popularity);

        }

        var options = {};

        options['dataMode'] = 'regions';

 

        var container = document.getElementById('map_canvas');

        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);

    }

 </script>

 

 

در بالا  پذیرفتن پاسخ به عنوان پارامتر شیء پاسخ شامل آرایه JSON است. سپس  ایجاد شیء داده DataTable Google Visualization و ایجاد دو ستون کشور و محبوبیت است . کشور یک ستون ضروری است که کد ملی یا نام کشور را که در صورتی که داده های آن ورودی نادرست باشد نمایش داده نخواهد شد. پارامترهای دیگر می تواند هر چیزی باشد.

سپس از طریق شی Response حلقه می زنیم و ردیف ها را در datatable ایجاد می کنیم. بعد یک شیء کانت ایجاد می شود که مرجع شیء بسیار زیادی از کنترل HTML DIV است که به عنوان یک بوم برای نقشه ما عمل می کند. در نهایت روش قرعه کشی نامیده می شود که به سادگی نقشه را در map_canvas DIV ارائه می دهد.

<div id='map_canvas'></div>

توجه :

برای این مقاله از ویژوال استودیو 2008 استفاده کردیم. برای استفاده از این قابلیت در ویژوال استودیو 2005 شما باید AJAX Extensions را نصب کنید و ScriptManager را به صفحه اضافه کنید. همچنین به جای response.d شما باید برای پاسخ مقادیر بازگشتی را بررسی کنید

شکل زیر نشانگر نقشه جهانی نقشه برداری Geomap است که در وب سایت asp.net نمایش داده می شود

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :