أحداث خرائط Google
انقر فوق العلامة للتكبير
ما زلنا نستخدم الخريطة من الصفحة السابقة: خريطة مركزها لندن ، إنجلترا.
نريد الآن التكبير / التصغير عندما ينقر المستخدم على العلامة (نرفق معالج حدث بعلامة تقوم بتكبير الخريطة عند النقر فوقها).
هذا هو الكود المضاف:
مثال
// Zoom to 9 when clicking on marker
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);
});
افتح InfoWindow عند النقر فوق العلامة
انقر فوق العلامة لإظهار نافذة المعلومات مع بعض النص:
مثال
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
تعيين علامات وفتح InfoWindow لكل علامة
قم بتشغيل وظيفة عندما ينقر المستخدم على الخريطة.
تضع وظيفة 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: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}