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

با شرکت طراحی قالب وردپرس آنفایو همراه باشید.

ایجاد رویداد

برای ایجاد رویداد از addListener() استفاده می شود.

این متد، یک شیئ، یک رویداد برای این شیئ و یک تابع برای زمانی که رویداد رخ میدهد لازم دارد.

مثال: نقشه و رویداد های نقشه

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

function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
// ۳ seconds after the center of the map has changed, pan back to the.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, ۳۰۰۰);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);

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

نکته: اگر شما میخواهیید تغیراتی که در دید کاربر داده میشود ببنید باید از رویداد bounds_changed به جای zoom_changed و center_changed استفاده کنید. به دلیل این که این توابع بعد از تغیر در دید اجرا میشوند.از تابع getBounds() نیز میتوانید قبل از گزارش استفاده کنید.

مثال: تغیرشیپ ها با رویداد درگ

زمانی که یک شیپ درگ یا ویرایش میشود پس از پایان رویداد مجموعه ای از رویدادها فراخوانی میشوند.

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

دسترسی به آرگومان ها در رویدادهای کاربری

رویداد های کاربری در نقشه های گوگل Api V3 آرگومان های رویداد ها را که توسط رویدادها گرفته می شود، با توجه به حالتی که در رویداد رخ داده است عبور میدهند. به طور مثال زمانی که رویداد ‘click’ رخ می دهد آرگومان MouseEvent حاوی یک ویژگی با نام latLng است که بر محلی که کلیک شده است دلالت میکند. توجه داشه باشید که این رفتار مختص رویداد های کاربری میباشد، در این رویداد آرگومان های کنترل وضعیت کنترل وضعیت نمایش عبور نمیکنند.اما شما به آرگومان های رویداد دسترسی دارید. شما میتوانید  با بررسی تنظیمات شیئ مقادیر آرگومان ها را بدست آورید.

مثال زیر یک رویداد به نقشه  اضافه میکند این رویداد زمانی که کاربر روی نقشه کلیک میکند یک نشانه گر به نقشه اضافه میکند.با ما در طراحی قالب وردپرس حرفه ای شوید.

var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
 
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
 
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
 
map.setCenter(location);
}

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

استفاده از تابع Closures در توابع ایجاد رویداد

زمانی که تابع ایجاد رویدادی اجرا می شود، اغلب دو فایده دارد ناحیه دیدش محافظت شده است و مداوم به یک شیئ متصل شده.

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

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

با کلیک بر روی هر یک از نشانه گر ها یک پیغام مخفی به وجود میاید. که در خود شیئ وجود ندارد.

var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
 
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
 
// (شرکت <b><i>طراحی قالب وردپرس</i></b> آنفایو) Add 5 markers to the map at random locations.
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: location,
map: map
});
var j = i + 1;
marker.setTitle(j.toString());
attachSecretMessage(marker, i);
}
}
&nbsp;
// The five markers show a secret message when clicked.
// but that message is not within the marker's instance data.
function attachSecretMessage(marker, number) {
var message = ["This","is","the","secret","message"];
&nbsp;
var infowindow = new google.maps.InfoWindow(
{ content: message[number],
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}

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

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

با ما حرفه ای شوید.