نمایش موقعیت شما در گوگل
نمایش موقعیت در گوگل

نمایش موقعیت شما در گوگل

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

برای مشاهده لینک وارد شود

شما در این پلاگین قادر خواهید بود تا مکان های مورد علاقه خود را ذخیره نمایید.

نمایش موقعیت شما در گوگل
نمایش موقعیت شما در گوگل

خوب کار رو با نوشتن کدهای Html آغاز می کنیم.ما در ابتدا یک سند HTML5 با اجزای(components)بوت استریپ داریم. شما به نحوه وارد کردن کتابخانه ها و استایل های بوست واچ(bootswatch ) توجه کنید.

index.html

<!--
Translate by:Majid MohammadNejad
Website:http://8np.ir
-->
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>جست و جوی مکان در گوگل </title>
<link href="node_modules/bootswatch/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" /> <link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>

	<div class="container">

		<h1>نمایش موقعیت شما در گوگل </h1>

		<form id="geocoding_form" class="form-horizontal">
			<div class="form-group">
				<div class="col-xs-12 col-md-6 col-md-offset-3">
					<div class="input-group">
						<input type="text" class="form-control" style="text-align:right;" id="address" placeholder="لطفا مکان مورد نظر خود را وارد نمایید...">
						<span class="input-group-btn">
							<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
						</span>
					</div>
				</div>
			</div>
		</form>

		<div class="map-overlay">
			<p>در حال بارگذاری...</p>
			<div id="map"></div>
		</div>
		<div class="col-xs-12 col-md-6 col-md-offset-3 save-container">
			<h4 id="save-location"></h4><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
		</div>

		<div class="list-group col-xs-12 col-md-6 col-md-offset-3">
			<span class="list-group-item active">مکان های ذخیره شده</span>
		</div>

	</div>

	<footer>
		<a class="tz" href="http://8np.ir">ترجمه توسط برنامه نویسان نوین پندار</a>
	</footer>

	<!-- The jQuery library -->
	<script src="node_modules/jquery/dist/jquery.min.js"></script>

	<!-- The Moment.js library -->
	<script src="node_modules/moment/moment.js"></script>

	<!-- Including the Google Maps API and the GMaps library -->
	<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script src="node_modules/gmaps/gmaps.js"></script>

	<!-- Including our own JavaScript file -->
	<script src="assets/js/script.js"></script>

</body>
</html>

 کدهای بالا به دلیل سادگی نیازی به توضیح ندارند .در داخل متن نیز توضیحات لازم داده شده است.

جاوااسکریپت

کدهای جاوااسکریپتی که ما در اینجا استفاده خواهیم کرد کار ذخیره و فراخوانی یک موقعیت را از داخل localstorage به عهده خواهد داشت.ما با استفاده از کتابخانه gmap نقشه گوگل را ایجاد کردیم و آدرس نوشته شده در داخل کادر را به مختصات جفرافیایی متناسب با آن تبدیل کردیم.

script.js

$(function(){

	var saveContainer = $('.save-container'),
		favoriteIcon = saveContainer.find('.glyphicon'),
		favoriteLocationsListGroup = $('.list-group');

	var hasFavoriteLocations = false;

  //gmapsبارگذاری نقشه گوگل با استفاده از کتابخانه  ی 

	var map = new GMaps({
		el: '#map',
		lat: '0',
		lng: '0',
		zoom: 1
	});

  //بارگذاری آرایه مکان های مورد علاقه که در داخل locastorage نگه داری میشود.

	if(!localStorage.hasOwnProperty('favorite-locations')) {
		localStorage.setItem('favorite-locations', JSON.stringify([]));
	}

	hasFavoriteLocations = JSON.parse(localStorage.getItem('favorite-locations')).length ? true : false;

  //کنترل آیکون های ثبت و جست و جوی فرم
	$('.glyphicon-search').click(showLocationByAddress);
	$('#geocoding_form').submit(showLocationByAddress);

  //با کلیک کردن  تمام مکان های مورد علاقه  را کنترل می کنیم.
	$(document).on('click','a.list-group-item', showLocationByCoordinates);

  //کلیک کردن  روی آیکون مورد علاقه باعث ذخیره شده یا پاک شدن آن مکان از لیست میشود.
	$(document).on('click', '.glyphicon-star', removeFavoriteLocation);
	$(document).on('click', '.glyphicon-star-empty', saveFavoriteLocation);

  //اگر مکان مورد علاقه ای  وجود داشته باشد آن را به لیست آنها اضافه می کند.

	if(hasFavoriteLocations) {

		var array = JSON.parse(localStorage.getItem('favorite-locations'));

		favoriteLocationsListGroup.empty();
		favoriteLocationsListGroup.append('<span class="list-group-item active">Saved Locations</span>');

		array.forEach(function(item){
			favoriteLocationsListGroup.append('<a class="list-group-item" data-lat="'+item.lat+'" data-lng="'+item.lng+'" data-createdAt="'+item.createdAt+'">'+item.address+'<span class="createdAt">'+moment(item.createdAt).fromNow()+'</span><span class="glyphicon glyphicon-menu-right"></span></a>');
		});

		favoriteLocationsListGroup.show();

	}

  //کار این تابع پردازش  و نمایش آدرس از روی متن وارد شده می باشد.

	function showLocationByAddress(e) {

		e.preventDefault();

    //دریافت مختصات از آدرس دریافتی

		GMaps.geocode({
			address: $('#address').val().trim(),
			callback: function(results, status) {

				if (status !== 'OK') return;


				var latlng = results[0].geometry.location,
					fullAddress = results[0].formatted_address,
					isLocationFavorite = false,
					locationsArray = JSON.parse(localStorage.getItem('favorite-locations')),
					saveLocation = $('#save-location');

				var map = new GMaps({
					el: '#map',
					lat: latlng.lat(),
					lng: latlng.lng()
				});

        //اضافه کردن علامت به مکان درخواستی
				
				map.addMarker({
					lat: latlng.lat(),
					lng: latlng.lng()
				});

        //بررسی  وجود داشتن آدرس در آرایه مورد علاقه ها

				if(locationsArray.length) {
					locationsArray.forEach(function (item) {
						if (item.lat == latlng.lat() && item.lng == latlng.lng()) {
							isLocationFavorite = true;
						}
					});
				}

        //اضافه کردن آدرس به اچ تی ام ال و تنظیمات با استفاده از مختصات دریافتی
				saveLocation.text(fullAddress).attr({'data-lat': latlng.lat(), 'data-lng': latlng.lng()});

        //پاک کردن کلاس اکتیو از تمامی موقعیت های مورد علاقه
				favoriteLocationsListGroup.find('a.list-group-item').removeClass('active-location');

        // تغییر آیکون به مورد علاقه من نیست
				
				if(!isLocationFavorite) {
					favoriteIcon.removeClass('glyphicon-star').addClass('glyphicon-star-empty');
				}
				else {
					
          // اضافه کردن کلاس اکتیو و آیکون مورد علاقه بهموقعیت  های مورد علاقه شما
					favoriteIcon.removeClass('glyphicon-star-empty').addClass('glyphicon-star');

          //یافتن موقعیت وارد شده در بین لیست موردعلاقه های شما
          //انتخاب آن به موقعیت فعلی و نمایش آن به عنوان  آخرین موقعیت انتخابی

					favoriteLocationsListGroup.find('a.list-group-item[data-lat="'+latlng.lat()+'"][data-lng="'+latlng.lng()+'"]').addClass('active-location');
				}

        //نمایش اچ تی ام ال موقعیت دریافت شده
				saveContainer.show();

			}

		});
	}

  //این تابع هنگام کلیک کردن  مکان مورد علاقه فراخوانی میشود
  //خواندن مختصات و نمایش آن بر روی نقشه

	function showLocationByCoordinates(e) {

		e.preventDefault();

		var elem = $(this),
			location = elem.data();

    //دریافت آدرس از مختصات محل 

		GMaps.geocode({
			location: {lat: location.lat, lng: location.lng},
			callback: function(results, status) {

				if (status !== 'OK') return;

				var fullAddress = results[0].formatted_address,
					saveLocation = $('#save-location');

				var map = new GMaps({
					el: '#map',
					lat: location.lat,
					lng: location.lng
				});

				map.addMarker({
					lat: location.lat,
					lng: location.lng
				});

        //اضافه کردن آدرس به تنظیمات و اچ تی ام ال
        //اطلاعات  و مختصات مکان مورد نظر

				saveLocation.text(fullAddress);
				saveLocation.attr({
					'data-lat': location.lat,
					'data-lng': location.lng
				});

        //یک پس زمینه رنگی به موقعیت یا مکان مورد علاقه اضافه می کند و آن را از موقعیت قبلی پاک می کند.

				favoriteLocationsListGroup.find('a.list-group-item').removeClass('active-location');
				favoriteLocationsListGroup.find('a.list-group-item[data-lat="'+location.lat+'"][data-lng="'+location.lng+'"]').addClass('active-location');

        //آیکون مورد علاقه را به موقعیت دریافتی اضافه می کند.
				favoriteIcon.removeClass('glyphicon-star-empty').addClass('glyphicon-star');

        //مکان دریافتی را به صورت اچ  تی ام ال نمایش می دهد.
				saveContainer.show();

        //فیلد جست و جو را پاک می کند
				$('#address').val('');

			}

		});

	}

  //این تابع مکان را در داخل مورد علاقه ها ذخیره میکند و آن را به داخل locastorage اضافه می کند.

	function saveFavoriteLocation(e){

		e.preventDefault();

		var saveLocation = $('#save-location'),
			locationAddress = saveLocation.text(),
			isLocationFavorite = false,
			locationsArray = JSON.parse(localStorage.getItem('favorite-locations'));

		var location = {
			lat: saveLocation.attr('data-lat'),
			lng: saveLocation.attr('data-lng'),
			createdAt: moment().format()
		};

    //بررسی می کنیم که آیا مکان جست و جو شده در در آرایه مورد علاقه های ما است یا نه؟

		if(locationsArray.length) {
			locationsArray.forEach(function (item) {
				if (item.lat == location.lat && item.lng == location.lng) {
					isLocationFavorite = true;
				}
			});
		}

    //اگر مکان دریافتی مورد علاقه شما نباشد
    //آن را به آرایه locastorage اضافه می کند.

		if(!isLocationFavorite) {

			favoriteLocationsListGroup.append(
				'<a class="list-group-item active-location" data-lat="'+location.lat+'" data-lng="'+location.lng+'" data-createdAt="'+location.createdAt+'">'+
				locationAddress+'<span class="createdAt">'+moment(location.createdAt).fromNow()+'</span>' +
				'<span class="glyphicon glyphicon-menu-right"></span>' +
				'</span></a>');

			favoriteLocationsListGroup.show();

      //مکان های دریافتی را به آرایه locastorage اضافه می کند.
			locationsArray.push({
				address: locationAddress,
				lat: location.lat,
				lng: location.lng,
				createdAt: moment().format()
			});

			localStorage.setItem('favorite-locations', JSON.stringify(locationsArray));

      //آیکون ستاره را به صورت کامل نمایش می دهد یعنی این مکان مورد علاقه شما است
			favoriteIcon.removeClass('glyphicon-star-empty').addClass('glyphicon-star');

      //حالا ما حداقل یک مکان مورد علاقه داریم.
			hasFavoriteLocations = true;
		}

	}

  //این تابع مکانی را از مکان های مورد علاقه ی شما پاک می کند.
  //localstorageهمچنین از 
	
	function removeFavoriteLocation(e){

		e.preventDefault();

		var saveLocation = $('#save-location'),
			isLocationDeleted = false,
			locationsArray = JSON.parse(localStorage.getItem('favorite-locations'));

		var location = {
			lat: saveLocation.attr('data-lat'),
			lng: saveLocation.attr('data-lng')
		};

    //localStorage پاک کردن مکان دریافت شدن از آرایه 
		if(locationsArray.length) {
			locationsArray.forEach(function (item, index) {
				if (item.lat == location.lat && item.lng == location.lng) {
					locationsArray.splice(index,1);
					isLocationDeleted = true;
				}
			});
		}

		if(isLocationDeleted) {

      //حذف کردن مکان داده شده از لیست مورد علاقه شما

			favoriteLocationsListGroup.find('a.list-group-item[data-lat="'+location.lat+'"][data-lng="'+location.lng+'"]').remove();

			localStorage.setItem('favorite-locations', JSON.stringify(locationsArray));

      //پاک کردن آیکون مورد علاقه از  اچ  تی ام ال
			favoriteIcon.removeClass('glyphicon-star').addClass('glyphicon-star-empty');

			if(!locationsArray.length) {
				
				// مکان مورد علاقه بیشتری وجود ندارد

				hasFavoriteLocations = false;
				favoriteLocationsListGroup.hide();
			}
			else {
				hasFavoriteLocations = true;
			}

		}

	}

});

ما در این آموزش نیاز چندانی به نوشتن کدهای CSS نداریم زیرا ما در اینجا از تم flatly موجود در بوت استریپ استفاده کردیم ولی باز هم جند کد CSS برای تنظیمات صفحه استفاده کردیم که ما فقط در زیر آنها را برایتان نمایش می دهیم ونیازی به توضیح ندارند.

CSS

body{
direction:rtl;
}
.container {
	max-width: 980px;
	text-align: center;
	margin: 20px auto;
}

h1 {
	margin-bottom: 20px;
}

#geocoding_form {
	margin: 40px auto 60px;
}

#address {
	border-radius: 3px;
}

.input-group {
	margin-left: 4%;
}

.glyphicon {
	font-size: 18px;
	z-index: 20;
	cursor: pointer;
}

.glyphicon-search{
	position: relative;
	right: -30px;
}

.save-container {
	display: none;
	margin-top: 30px;
}

#save-location {
	display: inline;
	margin: 10px auto;
	line-height: 1.4;
}

.save-container .glyphicon-star, 
.save-container .glyphicon-star-empty {
	display: inline-block;
	margin-left: 10px;
	font-size: 22px;
	vertical-align: text-bottom;
}

.glyphicon-menu-right {
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -9px;
}

.map-overlay {
	max-width: 550px;
	height: 350px;
	margin: 0 auto;
	background-color: #FCFCFC;
	position: relative;
	border-radius: 2px;
}

.map-overlay p {
	position: absolute;
	width: 84px;
	height: 22px;
	left: 50%;
	top: 50%;
	margin: -11px auto 0 -42px;
	font-size: 20px;
	color: #969FA8;
}

#map {
	max-width: 500px;
	height: 350px;
	margin: 0 auto;
}

.list-group {
	display: none;
	padding: 0 15px;
	margin-top: 50px;
}

.list-group-item {
	position: relative;
	padding: 10px 20px;
}

a.list-group-item {
	cursor: pointer;
}

a.list-group-item:hover {
	background-color: #F7FBFF;
}

a.active-location {
	background-color: #EEF6FF;
}

a.active-location:hover {
	background-color: #EBF3FC;
}

a.list-group-item span.createdAt {
	display: block;
	color: #969FA8;
	z-index: -1;
}

پایان

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


هفت × = 21

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>