أحداث خريطة Google

تكبير عند ضغط العلامة

نستمر في استخدام الخريطة من الصفحة السابقة: خريطة مركزها لندن، بريطانيا.

الآن، نريد تكبير الخريطة عند ضغط المستخدم على العلامة (سنقوم بتعيين معالج أحداث على العلامة لتكبير الخريطة عند الضغط)

هذا هو الكود المضافة:

النموذج

// تكبير عند ضغط العلامة إلى 9
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

نستخدم معالج الأحداث addListener() للتسجيل في إشعارات الأحداث. يقبل هذا الطريقة معاملات هي:

• مثل
• حدث يتم الاستماع إليه
• وظيفة يتم استدعاؤها عند حدوث حدث معين

التحرك إلى العلامة

في هذا المكان، نحفظ تغيير التكبير وننقل الخريطة بعد 3 ثوانٍ:

النموذج

google.maps.event.addListener(marker,'click',function() {
  var pos = map.getZoom();
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  window.setTimeout(function() {map.setZoom(pos);},3000);
});

عند ضغط العلامة، سيتم فتح نافذة المعلومات

عند ضغط العلامة، سيتم عرض نافذة معلومات تحتوي على نص:

النموذج

var infowindow = new google.maps.InfoWindow({
  content: "مرحبًا بالعالم!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

تعيين العلامة وفتح نافذة المعلومات لكل علامة

الوظيفة تشغيل عند ضغط المستخدم على الخريطة.

placeMarker() 函数会在用户单击的位置放置一个 علامة، وعرض نافذة معلومات تحتوي على عرض واطول العلامة:

النموذج

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'العرض: ' + location.lat() +
    'الطول: ' + location.lng()
  });
  infowindow.open(map,marker);
}