ساخت نقشه گوگل توسط AngularJS و ASP.NET MVC

ساخت نقشه گوگل توسط AngularJS و ASP.NET MVC ، در این مقاله میخواهیم نشان دهیم که چگونه می توان با استفاده از AngularJs و ASP.Net MVC یک نقشه گوگل بسازیم.

برای استفاده از Google Map، باید resource های زیر را به برنامه خود اضافه کنیم:

• js:// cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js
• js: یکی از وابستگی های کتابخانه angular-google-maps می باشد.

• Angular-google-maps.js: مجموعه ای از deirectiveها است که Google map را با برنامه های AngularJs ادغام می کنند.

مراحل زیر را دنبال کنید تا به سادگی یک برنامه google map با استفاده از AngularJs و ASP.Net MVC ایجاد کنیم:

نقشه گوگل توسط AngularJS

گام اول: ایجاد یک پروژه جدید

به منوی file رفته New > Project و سپس asp.net MVC4 web application را انتخاب کرده، نام مناسبی برای آن انتخاب می کنیم و روی Ok کلیک می کنیم. سپس Basic را انتخاب کرده و view engine Razor را انتخاب می کنیم و Ok می کنیم.

گام دوم: اضافه کردن دیتابیس

در Solution Explorer روی فولدر App_Data کلیک کرده Add > New Item و سپس SQL Server Database را انتخاب می کنیم و آن را به پروژه اضافه می کنیم. در اینجا دیتابیسی را به برنامه اضافه کردیم تا اطلاعات مکان هایی را برای نمایش روی google map در دیتابیس ذخیره کنیم.

برای پیدا کردن طول وعرض جغرافیایی مکانی که در آن هستید، می توانید از لینک زیر استفاده نمایید:

http://ctrlq.org/maps/where/

گام سوم: ایجاد یک جدول

در اینجا، به صورت زیر یک جدول برای ذخیره اطلاعات مکانی ایجاد می کنیم. دیتابیس را باز کرده، روی Table راست کلیک می کنیم، Add New Table را انتخاب می کنیم و سپس ستون های موردنظر را اضافه می کنیم و Save را می زنیم و Ok می کنیم.

گام چهارم: اضافه کردن entity Data Model

در Solution Explorer روی نام پروژه راست کلیک کرده، Add > New Item و سپس ADO.net Entity Data Model را انتخاب می کنیم و نام مناسبی نیز برای آن انتخاب می کنیم. یک سری پنجره ظاهر می شود (Entity Data Model Wizard) گزینه Generate from database را انتخاب کرده و Next را می زنیم، data connection و سپس دیتابیس خود را انتخاب می کنیم و بعد از زدن دکمه Next جدول موردنظر را انتخاب و فضای نام Model را اضافه می کنیم و سپس هم Finish را انتخاب می کنیم.

گام پنجم: ایجاد یک Controller

در Solution Explorer روی فولدر Controllers راست کلیک کرده و Add > Controller را انتخاب و نام مناسبی برای آن انتخاب می کنیم. گزینه “empty MVC controller” را انتخاب و گزینه Add را می زنیم. در اینجا ما Controllerای با نام “HomeController” ایجاد می کنیم.

گام ششم:

یک متد جدید برای دریافت View ای که می خواهیم در آن google map را نمایش دهیم، ایجاد می کنیم.

در اینجا متد “Index” را در HomeController به صورت زیر ایجاد کردیم.

گام هفتم:

یک متد جدید برای دریافت View ای که می خواهیم در آن google map را نمایش دهیم، ایجاد می کنیم.

در اینجا متد “Index” را در HomeController به صورت زیر ایجاد کردیم.

public ActionResult Index()

{

return View();

}

گام هشتم :

ایجاد یک متد دیگر (“GetAllLocation”) برای واکشی تمام مکان ها از دیتابیس

public JsonResult GetAllLocation()

{

using (MyDatabaseEntities dc = new MyDatabaseEntities())

{

var v = dc.Locations.OrderBy(a => a.Title).ToList();

return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

}

}

گام  نهم : اضافه کردن متد جدید دیگر(“GetMarkerInfo”) برای دریافت اطلاعات نشانگر google از دیتابیس برای نمایش در نقشه

public JsonResult GetMarkerInfo(int locationID)

{

using (MyDatabaseEntities dc = new MyDatabaseEntities())

{

Location l = null;

l = dc.Locations.Where(a => a.LocationID.Equals(locationID)).FirstOrDefault();

return new JsonResult { Data = l, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

}

}

گام دهم :

اضافه کردن یک فایل جاوا اسکریپت، که شامل کدهای موردنیاز برای پیاده سازی Google Map خواهد بود.

روی action method (در اینجا Index) راست کلیک کرده، Add View را انتخاب می کنیم و View Engine آن را نیز Razor انتخاب می کنیم و View  را اضافه می کنیم.

var app = angular.module('myApp', ['uiGmapgoogle-maps']);

app.controller('mapController', function ($scope, $http) {


//this is for default map focus when load first time

$scope.map = { center: { latitude: 22.590406, longitude: 88.366034 }, zoom: 16 }


$scope.markers = [];

$scope.locations = [];

//Populate all location

$http.get('/home/GetAllLocation').then(function (data) {

$scope.locations = data.data;

}, function () {

alert('Error');

});

//get marker info

$scope.ShowLocation = function (locationID) {

$http.get('/home/GetMarkerInfo', {

params: {

locationID: locationID

}

}).then(function (data) {

//clear markers

$scope.markers = [];

$scope.markers.push({

id: data.data.LocationID,

coords: { latitude: data.data.Lat, longitude: data.data.Long },

title: data.data.title,

address: data.data.Address,

image : data.data.ImagePath

});

//set map focus to center

$scope.map.center.latitude = data.data.Lat;

$scope.map.center.longitude = data.data.Long;


}, function () {

alert('Error');

});

}

//Show / Hide marker on map

$scope.windowOptions = {

show: true

};

});

گام یازدهم: اضافه کردن و طراحی View برای Index

روی Index راست کلیک می کنیم و Add View را انتخاب و view Engine آن را روی Razor می گذاریم و کدهای زیر را به آن اضافه می کنیم.

@{

ViewBag.Title = Index;

}


h2Index/h2

div ng-app=myApp ng-controller=mapController


div class=locations

ul


li ng-repeat=l in locations ng-click=ShowLocation(l.LocationID){{l.Title}}/li


/ul


/div

div class=maps

!-- Add directive code (gmap directive) for show map and markers--

ui-gmap-google-map center=map.center zoom=map.zoom

ui-gmap-marker ng-repeat=marker in markers coords=marker.coords options=marker.options events=marker.events idkey=marker.id

ui-gmap-window options=windowOptions show=windowOptions.show


div style=max-width:200px


div class=headerstrong{{marker.title}}/strong/div

div id=mapcontent

img ng-src={{marker.image}} style=width:200px; height:100px /


div{{marker.address}}/div

/div


/div


/ui-gmap-window

/ui-gmap-marker

/ui-gmap-google-map

/div


/div

@* Now here we need to some css and js *@


img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve=%3Cstyle%3E%0A%0A.angular-google-map-container%20%7B%0A%0Aheight%3A300px%3B%0A%0A%7D%0A%0A.angular-google-map%20%7B%0A%0Awidth%3A80%25%3B%0A%0Aheight%3A100%25%3B%0A%0Amargin%3Aauto%200px%3B%0A%0A%7D%0A%0A.locations%20%7B%0A%0Awidth%3A%20200px%3B%0A%0Afloat%3A%20left%3B%0A%0A%7D%0A%0A.locations%20ul%20%7B%0A%0Apadding%3A%200px%3B%0A%0Amargin%3A%200px%3B%0A%0Amargin-right%3A%2020px%3B%0A%0A%7D%0A%0A.locations%20ul%20li%20%7B%0A%0Alist-style-type%3A%20none%3B%0A%0Apadding%3A%205px%3B%0A%0Aborder-bottom%3A%201px%20solid%20%23f3f3f3%3B%0A%0Acursor%3A%20pointer%3B%0A%0A%7D%0A%0A%3C%2Fstyle%3E data-mce-resize=false data-mce-placeholder=1 class=mce-object width=20 height=20 alt=style title=style /

@section Scripts{

@* AngularJS library *@

img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve=%3Cscript%20src%3D%22%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.6%2Fangular.js%22%3E%3C%2Fscript%3E data-mce-resize=false data-mce-placeholder=1 class=mce-object width=20 height=20 alt=script title=script /

@* google map directive js *@

img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve=%3Cscript%20src%3D%22%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Flodash.js%2F2.4.1%2Flodash.js%22%3E%3C%2Fscript%3E data-mce-resize=false data-mce-placeholder=1 class=mce-object width=20 height=20 alt=script title=script /

img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve=%3Cscript%20src%3D%22%2F%2Frawgit.com%2Fangular-ui%2Fangular-google-maps%2F2.0.X%2Fdist%2Fangular-google-maps.js%22%3E%3C%2Fscript%3E data-mce-resize=false data-mce-placeholder=1 class=mce-object width=20 height=20 alt=script title=script /

@* here We will add our created js file *@

img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve=%3Cscript%20src%3D%22~%2FScripts%2FngMap.js%22%3E%3C%2Fscript%3E data-mce-resize=false data-mce-placeholder=1 class=mce-object width=20 height=20 alt=script title=script /

}

گام آخر: اجرای برنامه !