مشكلة في الحصول على موقع ال User بلغة الجافاسكربت

Zeina Almakdisi · 31 أكتوبر 2022

مرحبا احاول الحصول على موقع المستخدم من خلال التعامل مع Google Maps Api

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset='utf-8'>
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <title>Map</title>
         <script src="jquery-3.6.1.js"></script>
     <meta    name='viewport' content='width=device-width, initial-scale=1'>
     <style>
         #map {
           height: 100%;
         }
         html, body {
           height: 100%;
           margin: 0;
           padding: 0;
         }
       </style>
     </head>
 <body>
 
 <div id="map"></div>
 <script>

var map;
var marker;


var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  };
  function error(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }
  function success(position) {
        var {
            latitude,
            longitude
        } = position.coords;
     
       console.log (latitude); هنا يتم طباعة الاحداثيات بشكل صحيح
       console.log (longitude);
    }

  navigator.geolocation.getCurrentPosition(success, error, options);
  
 function initMap(){

    var mylocation={
     zoom:10,
     center:{lat:success,lng:longitude},///// اتوقع المشكلة في انني لم انجح بتمرير الاحداثيات هنا
     
    } 
  

    var map=new
     google.maps.Map(document.getElementById('map'),mylocation);
 
 
 </script>
 

  </script>
   <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzV-URjeXR4q7AAG__6rf5nqkxQOED5W4&callback=initMap"></script>
   </body>

عمر قره محمد · 1 نوفمبر 2022

بتاريخ 7 ساعات قال Zeina Makdisi:

بعد الانتظار ظهر خطأ

يوجد لديك الكثير من الاخطاء ومنها خطأ في كتابة الـ script الخاصة بإستدعاء الخريطة و آخر في وظيفة الـ success و آخر في وظيفة الـ initMap وكذلك فإنك لم تضيفي الكود الخاص بربط الـ SDK الخاص بالخرائط بالكود الخاص بك

window.initMap = initMap;

لإصلاح الاخطاء لاحظي الكود الصحيح :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Map</title>
    <!-- <script src="jquery-3.6.1.js"></script> -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script
            src="https://code.jquery.com/jquery-3.6.1.js"
            integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
            crossorigin="anonymous"
            ></script>

    <!-- الخاصة بالخريطة كالتالي script نعدل الـ  -->
    <!-- async نضيف الـ  -->
    <!-- إلى الرابط &callback=initMap نضيف  -->
    <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzV-URjeXR4q7AAG__6rf5nqkxQOED5W4&callback=initMap"
            ></script>
    <script>
      var map;
      var marker;
      var mylocation;

      var options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0,
      };
      function error(err) {
        console.warn(`ERROR(${err.code}): ${err.message}`);
      }

      // mylocation حتى نحفظ الموقع في المتغير  success نعدل الـ
      function success(position) {
        var { latitude, longitude } = position.coords;

        // mylocation نضيف الموقع إلى
        mylocation = { latitude, longitude };
      }

      navigator.geolocation.getCurrentPosition(success, error, options);

      // لتصبح بالشكل التالي initMap يجب تعديل الـ
      function initMap() {
        // والذي يحتوي الموقع و درجة التقريب option نضيف المتغير
        const option = {
          zoom: 10,
          // mylocation نحضر الاحداثيات من الـ
          center: { lat: mylocation.latitude, lng: mylocation.longitude },
        };
        map = new google.maps.Map(document.getElementById("map"), option);
      }

      // نضيف الكود التالي كما في توجيهات جوجل
      window.initMap = initMap;
    </script>
  </body>
</html>

بعد اصلاح كل الاخطاء ستفتح الخريطة ثم سيعطيك الخطأ :

Google Maps JavaScript API error: InvalidKeyMapError

والذي يعني أن الـ key الذي تستخدمينه غير صالح ويجب ان تقومي بعمل مشروعك في Google Cloud Console وتفعيل الفوترة لمشروعك وعدها تفعيل الـ API للمشروع ومن ثم الحصول على key صالح للمشروع.

اطلع على توثيق خرائط جوجل لهذه المشكلة

Kais Hasan · 31 أكتوبر 2022

في السطر التالي:

center:{lat:success,lng:longitude}

لماذا تقومين بتمرير sucess، ألا يجب تمرير latitude ؟

Zeina Almakdisi · 31 أكتوبر 2022

بتاريخ منذ ساعة مضت قال Kais Hasan:
في السطر التالي:
center:{lat:success,lng:longitude}
لماذا تقومين بتمرير sucess، ألا يجب تمرير latitude ؟

اخطأت عند اختصار الكود

حاولت تمرير

Success.longitude لم تظهر نتيجة

وعند تمرير longitude يعطي undefined

علي عبد محسن · 31 أكتوبر 2022

بعد فحص الكود يتبين وجود مشكلات عديدة:

أولاً: هناك خطأ في التكويد حيث أن أحد الأقواس curly braces لم يتم أغلاقه مما يتسبب syntax error.

ثانياً: أستيراد أدوات google في نهاية الملف أمر سيء لأن الكود يعمل مباشرة بعد التحميل وأنتي تضعين الأكواد في سكربت قبل سكربت تحميل google. أيضا لا حاجة لوضع async لنفس السبب.

ثالثاً: المتغير mylocation يجب تعريفه مسبقاً ومن ثم تعديل قيمته في initMap ومن ثم الوصول الى قيمته عند إنشاء المتغير map في أخر سطر من السكربت وإلا سيظهر خطأ reference error

رابعاً: الأفضل إزالة هذا الجزء &callback=initMap من رابط التحميل للمكتبة كونه يسبب error exception

مرفق لك الكود بعد التعديل

<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <title>Map</title>
       <!-- <script src="jquery-3.6.1.js"></script> -->
       <script
       src="https://code.jquery.com/jquery-3.6.1.js"
       integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
       crossorigin="anonymous"></script>

       <script src="https://maps.googleapis.com/maps/api/js?key=AIzV-URjeXR4q7AAG__6rf5nqkxQOED5W4"></script>

   <meta    name='viewport' content='width=device-width, initial-scale=1'>
   <style>
       #map {
         height: 100%;
       }
       html, body {
         height: 100%;
         margin: 0;
         padding: 0;
       }
     </style>
   </head>
<body>

<div id="map"></div>
<script>

  var map;
  var marker;
  var mylocation;

  var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  };
  function error(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }
  function success(position) {
        var {
            latitude,
            longitude
        } = position.coords;

       console.log (latitude)
       console.log (longitude);
    }

  navigator.geolocation.getCurrentPosition(success, error, options);

  function initMap(){

    var mylocation={
     zoom:10,
     center:{lat:success,lng:longitude},

    }

  }
  
  var map= new google.maps.Map(document.getElementById('map'),mylocation);
</script>

</body>
</html>

Kais Hasan · 31 أكتوبر 2022

بتاريخ 8 دقائق مضت قال Zeina Makdisi:

اخطأت عند اختصار الكود

حاولت تمرير

Success.longitude لم تظهر نتيجة

وعند تمرير longitude يعطي undefined

حسب ما ذكرتي في تعليق ضمن الكود بأن قيم ال latitude , longitude تظهر بشكل صحيح عند طباعتها ضمن التابع sucsess، و قمتي بتعريف هذه المتحولات على أنها global بالتالي يمكن الوصول إليها مباشرة من تابع آخر.

أي يفترض في حال كان ما سبق صحيحاً، أنه يمكنك كتابة ما يلي:

center:{lat:latitude,lng:longitude}

يفترض أن ذلك سيعطي القيم الصحيحة، في حال لم يعطي جربي طباعة قيم latitude,longitude داخل التابع initMap، و إخباري بالنتيجة.

Zeina Almakdisi · 31 أكتوبر 2022

بتاريخ منذ ساعة مضت قال Kais Hasan:
حسب ما ذكرتي في تعليق ضمن الكود بأن قيم ال latitude , longitude تظهر بشكل صحيح عند طباعتها ضمن التابع sucsess، و قمتي بتعريف هذه المتحولات على أنها global بالتالي يمكن الوصول إليها مباشرة من تابع آخر.

أي يفترض في حال كان ما سبق صحيحاً، أنه يمكنك كتابة ما يلي:
center:{lat:latitude,lng:longitude}
يفترض أن ذلك سيعطي القيم الصحيحة، في حال لم يعطي جربي طباعة قيم latitude,longitude داخل التابع initMap، و إخباري بالنتيجة.

قمت بكتابتهم كما ذكرت

يأخذ وقت طويل في التحميل اكثر من ساعة من دون اظهار أي خريطة

جربت طباعتهما داخل التابع initmap عن طريق ال console لم تظهر أي نتيجة لم تظهر احداثيات

Kais Hasan · 31 أكتوبر 2022

بتاريخ 10 دقائق مضت قال Zeina Makdisi:

قمت بكتابتهم كما ذكرت

يأخذ وقت طويل في التحميل اكثر من ساعة من دون اظهار أي خريطة

جربت طباعتهما داخل التابع initmap عن طريق ال console لم تظهر أي نتيجة لم تظهر احداثيات

جربي طباعة هذه القيم قبل

var map= new google.maps.Map(document.getElementById('map'),mylocation);

يفترض أن يظهر قيمة هنا.

و كما ذكرتي فإنه يأخذ وقت طويل، لكن بما أن هناك timeout فيفترض أن الوقت الطويل لجلب البيانات، ربما البيانات كبيرة جداً أو أن اتصال الانترنت لديك بطيء فيجب علينا معرفة هل يتم تحميل بيانات خلال عملية الانتظار أم لا، تحققي من استهلاك الانترنت عند الانتظار.

Zeina Almakdisi · 31 أكتوبر 2022

بعد الانتظار ظهر خطأ

بتاريخ 2 ساعات قال Kais Hasan:
جربي طباعة هذه القيم قبل
var map= new google.maps.Map(document.getElementById('map'),mylocation);
يفترض أن يظهر قيمة هنا.

و كما ذكرتي فإنه يأخذ وقت طويل، لكن بما أن هناك timeout فيفترض أن الوقت الطويل لجلب البيانات، ربما البيانات كبيرة جداً أو أن اتصال الانترنت لديك بطيء فيجب علينا معرفة هل يتم تحميل بيانات خلال عملية الانتظار أم لا، تحققي من استهلاك الانترنت عند الانتظار.

تم التعديل في 31 أكتوبر 2022 بواسطة Zeina Makdisi

Zeina Almakdisi · 1 نوفمبر 2022

بتاريخ 5 ساعات قال عمر قره محمد:


 ***** console.log(mylocation.latitude) ///undefined
      // لتصبح بالشكل التالي initMap يجب تعديل الـ
      function initMap() {
        // والذي يحتوي الموقع و درجة التقريب option نضيف المتغير
        const option = {
          zoom: 10,
          // mylocation نحضر الاحداثيات من الـ
          center: { lat: mylocation.latitude, lng: mylocation.longitude },
        };

  **** console.log(mylocation.latitude) ///undefined
        map = new google.maps.Map(document.getElementById("map"), option);
      }

شكرا لك لكن بعد تنقيذ ملاحظاتك لم تظهر أي خريطة لان

القيم مازالت غير مقروءة .. حاولت طباعتها عن طريق الconsole مازالت undefined

عمر قره محمد · 1 نوفمبر 2022

بتاريخ منذ ساعة مضت قال Zeina Makdisi:

شكرا لك لكن بعد تنقيذ ملاحظاتك لم تظهر أي خريطة لان

القيم مازالت غير مقروءة .. حاولت طباعتها عن طريق الconsole مازالت undefined

يحدث ذلك لأنه يتم احياناً يتم تحميل الـ sdk وربطه مع الـ initMap قبل تنفيذ الـ getCurrentPosition وبالتالي يكون الـ mylocation ما يزال فارغاً ولتجاوز المشكلة سنقوم بربط الموقع بالـ sdk بعد تنفيذ الـ getCurrentPosition وذلك بوضع الـ initMap و الـكود :

window.initMap = initMap;

داخل الوظيفة success والتي تنفذ عند الانتهاء من الـ getCurrentPosition.

ليصبح الكود كالتالي :

<script>
  var map;
  var marker;
  var mylocation;

  var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  };
  function error(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }

  function success(position) {
    var { latitude, longitude } = position.coords;
    mylocation = { latitude, longitude };

    function initMap() {
      const option = {
        zoom: 10,
        center: { lat: mylocation.latitude, lng: mylocation.longitude },
      };
      map = new google.maps.Map(document.getElementById("map"), option);
    }
    window.initMap = initMap;
  }

  navigator.geolocation.getCurrentPosition(success, error, options);
</script>

مشكلة في الحصول على موقع ال User بلغة الجافاسكربت

السؤال

Zeina Almakdisi

10 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Kais Hasan

Zeina Almakdisi

علي عبد محسن

Kais Hasan

Zeina Almakdisi

Kais Hasan

Zeina Almakdisi

Zeina Almakdisi

عمر قره محمد

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية