بخش مقالات آکادمی | Articles
آخرین آموزش ها

در Google Maps – قسمت چهارم به بررسی کردن رویدادهایی که برای مارکر ها(نشانگرها) در Google Maps وجود دارند بپردازیم. درباره نشانگرها در مقاله قبل توضیح دادیم. پس با ما تا آخر مقاله همراه باشین.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

Google Maps Events :

ما میتونیم به نشانگرها رویدادهایی برای گرداندن نقشه ضمیمه کنیم. در زیر یک یک آن ها را بررسی میکنیم.

بزرگنمایی با کلیک بر نشانگر :

ما دراینجا از نقشه ایی که در مقاله اول ایجاد کردیم، استفاده میکنیم. در اونجا مرکز نقشه برروی تهران-ایران قرار گرفته است. اکنون قصد داریم، هنگامی که کاربر برروی نشانگر کلیک کرد عمل بزرگنمایی انجام بشه. با اضافه کردن رویداد زیر ما این عمل رو امکان پذیر میکنیم:

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,’click’,function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });

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

حرکت برگشت به نشانگر :

دراینجا، ما یک رویداد گرداننده اضافه میکنیم تا ویژگی center و حرکت برگشت نقشه به نشانگر پس از 3 ثانیه به وسیله رویداد center_changed رو تغییر بده.

google.maps.event.addListener(map,’center_changed’,function() {
  window.setTimeout(function() {
    map.panTo(marker.getPosition());
  },3000);
});

باز شدن InfoWindow با کلیک روی نشانگر :

با تغییر رویداد زیر میتونیم با کلیک روی نشانگر یک infowindow که درونش متن دلخوامون رو نوشتیم نمایش بدیم:

var infowindow = newgoogle.maps.InfoWindow({
  content:”Hello World!”
  });

google.maps.event.addListener(marker, ‘click’, function() {
  infowindow.open(map,marker);
});

تنظیم نشانگرها و باز شدن InfoWindow برای هر نشانگر :

با اجرای یک تابع به نام ()placeMarker این رویداد بوجود میاد که هر کاربر با کلیک در هرجای نقشه، یک نشانگر به همراه infowindow با اطلاعات طول و عرض جغرافیایی نمایش داده خواهد شد.

google.maps.event.addListener(map,’click’, function(event) {
  placeMarker(event.latLng);
  });
function placeMarker(location) {
var marker = newgoogle.maps.Marker({
position: location,
map: map,
});
var infowindow = newgoogle.maps.InfoWindow({
content: ‘Latitude: ‘ + location.lat() +
‘<br>Longitude: ‘ + location.lng()
});
infowindow.open(map,marker);
}

به پایان بخش چهارم مقاله Google Maps رسیدیم و امیدواریم که مطالب برای شما مفید واقع شده باشه. ممنون از همراهی شما.

تاریخ ارسال
9 خرداد 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.