أحداث خرائط جوجل
انقر على العلامة لتكبير الخريطة
ما زلنا نستخدم خريطة لندن ، إنجلترا التي استخدمناها في المقالة السابقة.
عندما ينقر المستخدم على العلامة ، يتم تحقيق وظيفة تكبير الخريطة (يتم ربط حدث تكبير الخريطة عند النقر فوق العلامة).
الرمز كما يلي:
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> <script> var my google.maps.latlng (51.508742 ، -0.120850) ؛ تهيئة الدالة () {var mapprop = {center: myCenter ، Zoom: 5 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new google.maps.map (document.getelementById ( google.maps.marker ({الموضع: myCenter ، العنوان: 'انقر إلى Zoom'}) ؛ marker.setMap (map) ؛ // Zoom to 9 عند النقر على markergoogle.maps.event.addlistener (marker ، 'click' ، function () }) ؛} google.maps.event.adddomlistener (نافذة ، "تحميل" ، تهيئة) ؛ </script> </head> <body> <div id = "googlemap"> </viv> </body> </html>استخدم معالج الأحداث AddListener () لتسجيل الاستماع إلى الحدث. تستخدم هذه الطريقة كائن وحدث للاستماع إليه ، وسيتم استدعاء الوظيفة عند حدوث الحدث المحدد.
إعادة ضبط العلامة
نقوم بتغيير سمة "المركز" بإضافة معالج حدث إلى الخريطة. يستخدم الرمز التالي الحدث Center_Changed للاحتفال بالنقطة المركزية بعد 3 ثوانٍ:
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> <script> var my google.maps.latlng (51.508742 ، -0.120850) ؛ تهيئة الدالة () {var mapprop = {center: myCenter ، Zoom: 5 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new google.maps.map (document.getelementById ( google.maps.marker ({الموضع: myCenter ، العنوان: 'انقر إلى Zoom'}) ؛ marker.setMap (map) ؛ // Zoom to 9 عند النقر على markergoogle.maps.event.addlistener (marker ، 'click' ، function () google.maps.event.addlistener (MAP ، 'Center_Changed' ، function () {// 3 seconds بعد أن تغير مركز الخريطة ، يعود إلى window.settimeout (function () {map.panto (marker.getposition () ؛} ، 3000) ؛} ؛ تهيئة) ؛ </script> </head> <body> <div id = "googlemap"> </viv> </body> </html>تفتح نافذة الرسالة عند النقر فوق العلامة.
انقر فوق العلامة لعرض بعض المعلومات النصية في نافذة المعلومات:
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> <script> var my google.maps.latlng (51.508742 ، -0.120850) ؛ تهيئة الدالة () {var mapprop = {center: myCenter ، Zoom: 5 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new google.maps.map (document.getelementById ( google.maps.marker ({position: myCenter ،}) ؛ marker.setMap (map) ؛ var infowindow = new Google.Maps.infowindow ({content: "hello world! }) ؛} google.maps.event.adddomlistener (نافذة ، "تحميل" ، تهيئة) ؛ </script> </head> <body> <div id = "googlemap"> </viv> </body> </html>تعيين علامات وفتح نافذة المعلومات لكل علامة
قم بتنفيذ نافذة عندما ينقر المستخدم على الخريطة
عندما ينقر المستخدم على موقع على خريطة ، استخدم وظيفة placeMarker () لوضع علامة على الموضع المحدد ونافذة الرسائل تظهر:
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> var map ؛ var mycenter = new google.maps.latlng (51.508742 ، -0.120850) ؛ وظيفة تهيئة () {var mapprop = {center: myCenter ، Zoom: 5 ، maptypeid: google.maps.maptypeid.roadmap} ؛ MAP = جديد google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛ google.maps.event.addlistener (خريطة ، "انقر فوق" ، وظيفة (حدث) {placemarker (event.latlng) ؛}) ؛} وظيفة وظيفة (موقع) {var marker = new google.maps.marker ({الموضع: الموقع ، الخريطة ،}) ؛ var infoWindow = new Google.maps.infowindow ({content: 'latitude:' + location.lat () + '<br> longitude:' + location.lng ()}) ؛ infoWindow.open (MAP ، Marker) ؛} Google.Maps.Event.AdddomListener (نافذة ، "تحميل" ، تهيئة) ؛ </script> </head> <body> <div id = "googlemap"> </viv> </body> </html>ما سبق هو مجموعة من المعرفة الأساسية لأحداث خرائط Google. سوف نستمر في إضافة المعرفة ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!