Yomna Raouf

مرحبًا @Ayman Sefrini

نعم بإمكانك القيام بذلك باستخدام ما يُسمى ب Geolocation API الخاص ب Google maps API، كما يلي:

• في البداية سنحتاج للتحقق من أن المُتصفح يسمح بتحديد الموقع الجغرافي للجهاز/المستخدم:

// نتحقق من أن المتصفح الخاص بالمستخدم يدعم هذه التقنية، أو يعطي المواقع صلاحية تحديد الموقع الجعرافي للمستخدم
if (navigator.geolocation) {  
  // success فإذا كانت مدعومة من قِبل المتصفح نقوم باستدعاء تابع يُسمى 
  navigator.geolocation.getCurrentPosition(success);  
} else {  
  // و إذا لم تكُن كذلك، نُظهر للمستخدم الرسالة التالية
  alert("There is Some Problem on your current browser to get Geo Location!");  
} 

• إذا كان المتصفح يسمح بأمر كهذا، سنقوم باستدعاء تابع يُسمى success و سنقوم من خلاله بتحديد إحداثيات موقع المستخدم و عرضه على الخريطة.
• تحديد إحداثيات المستخدم، خطوط طول - دوائر عرض - المدينة

var lat = position.coords.latitude;    // موقع المستخدم بالنسبة لدوائر العرض 
var long = position.coords.longitude;  // موقع المستخدم بالنسبة لخطوط الطول   
var city = position.coords.locality;   // موقع المستخدم  - المدينة

• تحديد المكان الذي ستفتح عنده الخريطة 

var LatLng = new google.maps.LatLng(lat, long);  // تحديد الموقع على الخريطة بناءً على البيانات السابقة

• نقوم بضبط ال options الخاصة بالخريطة

// ضبط إعدادات الخريطة
var mapOptions = {  
  center: LatLng,  
  zoom: 12,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
};  

• الآن بتعريف متغير map وإعطاءه id الخاصة بالـ div

// عرض الخريطة على صفحة الويب
var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions);  

• نقوم بإنشاء مُحدد marker لعرض موقع المُستخدم على الخريطة

// و نقوم بإعداد عنوانه ليعرض إحداثيات موقع المستخدم LatLng القيمة position نقوم بتعريف المُحدد و نُعطي الخاصية 
var marker = new google.maps.Marker({  
  position: LatLng,  
  title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: "   
  + lat + +"<br />Longitude: " + long  
});  

• نقوم بإضافة المُحدد للخريطة:

// نقوم بإضافة المُحدد للخريطة 
  marker.setMap(map);  

• نقوم بإنشاء نافذة نصية infoWindow و نضيفها للخريطة:

// نقوم بإنشاء نافذة نصية و نضيفها للخريطة 
  var getInfoWindow = new google.maps.InfoWindow({ 
    content: "<b>Your Current Location</b><br/> Latitude:" + lat + "<br /> Longitude:" + long + "" 
  });  
  
  getInfoWindow.open(map, marker); 

لتُصبِح الشيفرة النهائية بالشكل التالي:

// نتحقق من أن المتصفح الخاص بالمستخدم يدعم هذه التقنية، أو يعطي المواقع صلاحية تحديد الموقع الجعرافي للمستخدم
if (navigator.geolocation) {  
  // success فإذا كانت مدعومة من قِبل المتصفح نقوم باستدعاء تابع يُسمى 
  navigator.geolocation.getCurrentPosition(success);  
} else {  
  // و إذا لم تكُن كذلك، نُظهر للمستخدم الرسالة التالية
  alert("There is Some Problem on your current browser to get Geo Location!");  
}  

// هنا نقوم بتحديد إحداثيات المستخدو و بلده و نقوم بإعداد الخريطة حتى تقوم بعرض موقعه
function success(position) {  
  
  var lat = position.coords.latitude;    // موقع المستخدم بالنسبة لدوائر العرض 
  var long = position.coords.longitude;  // موقع المستخدم بالنسبة لخطوط الطول   
  var city = position.coords.locality;   // موقع المستخدم  - المدينة
  
  var LatLng = new google.maps.LatLng(lat, long);  // تحديد الموقع على الخريطة بناءً على البيانات السابقة
 
  // ضبط إعدادات الخريطة
  var mapOptions = {  
    center: LatLng,  
    zoom: 12,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };  
  
  // عرض الخريطة على صفحة الويب
  var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions);  
  
  // و نقوم بإعداد عنوانه ليعرض إحداثيات موقع المستخدم LatLng القيمة position نقوم بتعريف المُحدد و نُعطي الخاصية 
  var marker = new google.maps.Marker({  
    position: LatLng,  
    title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: "   
    + lat + +"<br />Longitude: " + long  
  });  

  // نقوم بإضافة المُحدد للخريطة 
  marker.setMap(map);  
  
  // نقوم بإنشاء نافذة نصية و نضيفها للخريطة 
  var getInfoWindow = new google.maps.InfoWindow({ 
    content: "<b>Your Current Location</b><br/> Latitude:" + lat + "<br /> Longitude:" + long + "" 
  });  
  
  getInfoWindow.open(map, marker);  
}  

بتاريخ On 11/2/2020 at 03:54 قال Hafsa Aly:

لم استطع حل تمرين رقم 2

مرحبًا حفصة.

دعينا نقوم بتقسيم التمرين لمهام صغيرة بسيطة أولًا حتى نتمكن من حلها بعد ذلك سنقوم بتجميع هذه الأجزاء سويًا حتى نحصل على الحل النهائي.

• أولًا و قبل كل شئ حتى نتمكن من إظهار مقترحات للمستخدم سنحتاج لمعرفة ما هي الحروف أو ما هو النص الذي قام المستخدم بإدخاله، و لتنفيذ ذلك سنجد أننا سنحتاج للإنصات إلى أحداث لوحة المفاتيح "تمامًا كما هو موضح في هذا القسم من المقال" أي أننا سنحتاج معرفة ما يقوم المستخدم بإدخاله حرف بحرف، 

var app = new Vue({
  el: '#app',
  data: {
    userInput: ''
  },
  methods: {
    keyIsUp: function(event) {
            this.userInput = event.target.value;
    }
  },
  template: `
     <div id="app">
      <input type='text' v-on:keyup='keyIsUp' />
        <p>
        {{userInput}}
        </p>
    </div>
  `
})

لاحظي  هنا  كيف سيتم طباعة كل حرف أسفل مربع الإدخال بمجرد أن يقوم بكتابته.

• ثانيًا الآن و قد قمنا بمعرفة دخل المستخدم سنحتاج لفلترة أو تصفية قائمة الدول بناءً على هذا الدخل و وضع المقترحات في قائمة جديدة نسميها suggestions مثلًا، و للقيام بذلك سنحتاج لندور على جميع عناصر القائمة الخاصة بالدول و التحقق من إذا كان اسم الدولة يحتوي على أحد الأحرف التي أدخلها المستخدم فإذا كان كذلك سنقوم بإضافة الدولة إلى القائمة suggestions، و للقيام بذلك سنقوم باستخدام أحد ال array methods الخاصة بلغة JavaScript و هذه ال method تسمى filter و كما يوضح اسمها هذه الدالة تقوم بعملية فلترة/تصفية/ترشيح أي أنّها تقوم بالدوران على عناصر مصفوفة و تقوم بإعادة العناصر التي ينطبق عليها الشرط الذي نقوم نحن بتحديده فقط، حسنًا و لكن ما هو هذا الشرط في حالتنا؟؟ الشرط هو أن يحتوي اسم الدولة على الحروف التي قام للمستخدم بإدخالها و للقيام بذلك سنحتاج للبحث في اسم الدولة بهذه الحروف و لحسن الحظ JavaScript توفر لنا تابع جاهز أيضًا للقيام بهذا الأمر و هذا التابع يسمى includes "هل يحتوي" فهذا التابع يقوم بالتحقق من وجود حرف ما في السلسة النصية فإذا وجده يعيد القيمة true و إن لم يجده يعيد false. إذًا ما سنقوم به الآن هو الدوران على قائمة الدول و عمل ترشيح لها بناءً على ما يعيده التابع includes فإذا أعاد true سنقوم سنقوم بإضافة الدولة إلى قائمة المقترحات suggestions 

var app = new Vue({
  el: '#app',
  data: {
    userInput: '',
    countries: [
      'السعودية',
      'البحرين',
      'مصر',
      'السودان',
      'ليبيا',
      'الجزائر',
      'المغرب',
      'تونس',
      'موريتانيا',
      'العراق',
      'سوريا',
      'لبنان',
      'قطر',
      'الإمارات',
      'الصومال',
      'جزر القمر',
      'الكويت',
      'سلطنة عُمان',
      'الأردن',
      'اليمن',
      'فلسطين'
    ],
    suggestions: []
  },
  methods: {
    keyIsUp: function (event) {
      this.userInput = event.target.value;
      this.suggestions = this.countries.filter(country => {
        return country.includes(this.userInput);
      })
    }
  },
  template: `
    <div id="app">
    <input type='text' v-on:keyup='keyIsUp' />
      <p>
      {{suggestions}}
      </p>
    </div>
  `
})

لاحظي كيف تتم عملية الترشيح  هنا

• ثالثًا ما تبقى لنا الآن هو عرض هذه العناصر على هيئة قائمة لتصبح الأكواد النهائية كما يلي:

var app = new Vue({
  el: '#app',
  data: {
    userInput: '',
    countries: [
      'السعودية',
      'البحرين',
      'مصر',
      'السودان',
      'ليبيا',
      'الجزائر',
      'المغرب',
      'تونس',
      'موريتانيا',
      'العراق',
      'سوريا',
      'لبنان',
      'قطر',
      'الإمارات',
      'الصومال',
      'جزر القمر',
      'الكويت',
      'سلطنة عُمان',
      'الأردن',
      'اليمن',
      'فلسطين'
    ],
    suggestions: []
  },
  methods: {
    keyIsUp: function (event) {
      this.userInput = event.target.value;
      this.suggestions = this.countries.filter(country => {
        return country.includes(this.userInput);
      })
    }
  },
  template: `
  <div id="app">
  <input type='text' v-on:keyup='keyIsUp' />
    <ul>
      <li v-for="suggestion in suggestions" :key="suggestion">
        {{ suggestion }}
      </li>
    </ul>
  </div>
  `
})

يمكنك تجربة هذه الأكواد من هنا

أتمنى لك التوفيق.

بتاريخ On 1/7/2021 at 10:17 قال عبدالله ابوالخير:

السلام عليكم شرح ممتاز لكن سؤال كيف بيتم حفظ هذه الاجراءت لان عندما يتم التعديل من هذه الاداه لا يتم الحفظ 

لحفظ التعديلات التي تقوم بها في أدوات المطورين يمكنك استخدام الخطوات التالية، حيث سيتم ربط ملفات المشروع الخاص بك بأدوات المطورين و يتم كتابة التعديلات في ملفات مشروعك بشكل تلقائي:

1. اضغط على كلمة sources في DevTools
2. ثم Filesystem بعد ذلك علامة + 
3. سيظهر لك نافذة لاختيار المجلد / الملفات التي تحتوي المشروع 
4. قم باختيار الملف و ابدأ بالعمل و سيتم نقل التغييرات في ملفات المشروع