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

گرفتن و تنظیم خصوصیات رویداد

در نقشه گوگل رویدادهای تغیر وضعیت نمایش نمیتوانند آرگومان های در حال عبور را برسی کنند.(رویداد های کاربری میتوانند آرگومان های در حال عبور را برسی کنند.)

اگر شما نیاز به برسی تنظیماتی در وضعیت نمایش دارید شما باید از تابع getProperty() در اشیاء استفاده کنید. این بررسی همیشه وضعیت نمایش شیئ را باز میگرداند که ممکن است در اولین بار درست عمل نکند.

نکته:یک ویژگی از تنظیمات وضوح یک اداره کننده رویداد است. که ممکن است، نتیجه پاسخ به تغیرحالت تنظیمات خاص، تولید رفتار غیر قابل پیش بینی یا ناخواسته شود نظیر آغاز یک رویداد جدید.

به طور مثال اگر شما همیشه یک ویژگی را در بین این رویدادها کنترل کننده تعیین میکنید در نهایت یک حلقه بی نهایت ایجاد میشود.طراحی قالب وردپرس خود را به ما بسپارید.

در مثال زیر ما یک رویداد کنترل کننده را برای پاسخ به رویدادهای زوم با آوردن پنجره اطلاعات تنظیم کردیم.

function initialize() {
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 4,
center: myLatLng
};
 
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
 
var infowindow = new google.maps.InfoWindow({
content: 'Change the zoom level',
position: myLatLng
});
infowindow.open(map);
 
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomLevel = map.getZoom();
map.setCenter(myLatLng);
infowindow.setContent('Zoom: ' + zoomLevel);
});
}
 
google.maps.event.addDomListener(window, 'load', initialize);

مثال های دیگر را در گوگل مشاهده کنید.

بررسی رویدادهای اشیاء

سینتکس رویدادهای جاوااسکریپت گوگل مپ ساخت و مدیریت رویدادهای دلخواه است.

با این وجود اشیاء در مرورگر رویدادهای مخصوص به خود را دارند. اگر شما مایل به استفاده و پاسخ به این رویدادها هستید باید از تابعی به نام addDomListener() استفاده کنید.

روش استفاده از این تابع به صورت زیر است.

 addDomListener(instance:Object, eventName:string, handler:Function)

که در آن ممکن است هر عنصر  شیئ توسط مرورگر پشتیبانی شود.همانند

اعضای سلسله مراتبی اشیاء نظیر window و با document.body.myform

نام عناصر نظیر document.getElementById(“foo”)چ

توجه داشته باشید که  با توجه به مدل اشیاء مرورگر addDomListener() به سادگی از رویدادهای مرورگر عبور میکند. با این وجود مرورگر های امروزی حداقل تا سطح 2 رویداد ها را پشتیبانی میکنند(برای اطلاعات بیشتر به سایت راهنمای موزیلا مراجعه کنید).

 اگر شما مطالب قبل را خوانده باشید، احتمالاً برای آشنایی با رویدادهای اشیاء آماده هستید.

رویداد window.onload که ما آن را در تگ بادی استفاده میکنیم. برای بارگذاری کدهای اولیه جاوا اسکریپت استفاده میشود مانند کدهای زیر:

<script>
function initialize() {
&nbsp;
// Map initialization
&nbsp;
}
</script>
<body onload="initialize()">
<div id="map-canvas"></div>
</body>

اگر چه این رویداد به <body> متصل است ولی واقعاً سلسله مراتب سند اشیاء(Dom) در آن وجود دارد.

اگر چه درکش آسان است، استفاده از رویداد onload در تگ <body> مخلوطی از رویداد و محتوا را به وجود می آورد.

به طور کلی تمرین خوبی برای جدا کردن محتوا(html) از رویدادهای جاوا اسکریپت و ایجاد کد css به طور جداگانه است.

شما می توانید این کار را با جایگزین کردن رویداد onload های درون خطی کنترل با کنترل DOM در کد نقشه های API جاوا اسکریپت خود را انجام دهید مانند:

<script>
function initialize() {
// Map initialization
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas"></div>
</body>

مثال های دیگر.

اگر چه کد بالا Api  نقشه گوگل است با addDomListener() به شیئ پنجره مرورگر متصل میشود و اجازه میدهد تا Api به صورت نرمال با خارج از دامنه ارتباط برقرار کند.

حذف کردن رویداد

برای حذف یک رویداد خاص باید آن را به یک متغیر اختصاص بدهیم.

var listener1 = google.maps.event.addListener(marker, 'click', aFunction);
google.maps.event.removeListener(listener1);

برای حذف تمام رویداد ها باید از تابع clearInstanceListeners() استفاده شود.

var listener1 = google.maps.event.addListener(marker, 'click', aFunction);
var listener2 = google.maps.event.addListener(marker, 'mouseover', bFunction);
// Remove listener1 and listener2 from marker instance.
google.maps.event.clearInstanceListeners(marker);

برای حذف تمام برسی های برای یک نوع رویداد خاص و برای یک نمونه خاص باید از تابع clearListeners() استفاده کنیم.

marker.addListener('click', aFunction);
marker.addListener('click', bFunction);
marker.addListener('click', cFunction);
&nbsp;
// Remove all click listeners from marker instance.
google.maps.event.clearListeners(marker, 'click');

برای اطلاعات بیشتر میتوانید به گوگل مراجعه کنید.

منتظر آموزش های بعدی باشد.  شرکت طراحی سایت آنفایو

نظر خود را بگذارید

-- بارگیری کد امنیتی --