สถานที่ตั้งของผู้ใช้

API ตำแหน่งทางภูมิศาสตร์ช่วยให้คุณทราบตำแหน่งของผู้ใช้ได้เมื่อได้รับความยินยอมจากผู้ใช้

Paul Kinlan

Geolocation API ช่วยให้คุณค้นพบตำแหน่งของผู้ใช้ได้หากได้รับความยินยอมจากผู้ใช้ คุณสามารถใช้ฟังก์ชันการทำงานนี้เพื่อนำทางผู้ใช้ไปยังจุดหมายและติดแท็กตำแหน่งในเนื้อหาที่ผู้ใช้สร้างขึ้น เช่น ทำเครื่องหมายจุดที่ถ่ายภาพ

นอกจากนี้ Geolocation API ยังช่วยให้คุณเห็นตําแหน่งของผู้ใช้และติดตามผู้ใช้ขณะที่ผู้ใช้ย้ายไปมา โดยต้องได้รับความยินยอมจากผู้ใช้เสมอ (และขณะที่หน้าเว็บเปิดอยู่เท่านั้น) การดำเนินการนี้สร้าง Use Case ที่น่าสนใจมากมาย เช่น การผสานรวมกับระบบแบ็กเอนด์เพื่อเตรียมคำสั่งซื้อสำหรับการรับสินค้าหากผู้ใช้อยู่ใกล้ๆ

คุณจำเป็นต้องตระหนักถึงสิ่งต่างๆ มากมายเมื่อใช้ Geolocation API คู่มือนี้จะอธิบายถึงกรณีการใช้งานที่พบบ่อยและวิธีแก้ปัญหา

สรุป

• ใช้การกำหนดตำแหน่งทางภูมิศาสตร์เมื่อเป็นประโยชน์ต่อผู้ใช้
• ขอสิทธิ์เพื่อตอบสนองต่อท่าทางสัมผัสของผู้ใช้อย่างชัดเจน
• ใช้การตรวจหาฟีเจอร์ในกรณีที่เบราว์เซอร์ของผู้ใช้ไม่รองรับตำแหน่งทางภูมิศาสตร์
• ไม่เพียงดูวิธีใช้ตําแหน่งทางภูมิศาสตร์เท่านั้น แต่ให้ดูวิธีที่ดีที่สุดในการใช้ตําแหน่งทางภูมิศาสตร์
• ทดสอบตำแหน่งทางภูมิศาสตร์กับเว็บไซต์ของคุณ

เมื่อใดที่ควรใช้ตำแหน่งทางภูมิศาสตร์

• ค้นหาว่าผู้ใช้อยู่ใกล้สถานที่ตั้งจริงใดมากที่สุดเพื่อปรับแต่งประสบการณ์ของผู้ใช้
• ปรับแต่งข้อมูล (เช่น ข่าว) ให้เหมาะกับตําแหน่งของผู้ใช้
• แสดงตําแหน่งของผู้ใช้บนแผนที่
• ติดแท็กข้อมูลที่สร้างขึ้นภายในแอปพลิเคชันด้วยตำแหน่งของผู้ใช้ (นั่นคือ ติดแท็กสถานที่ในรูปภาพ)

ขอสิทธิ์อย่างมีความรับผิดชอบ

การศึกษาผู้ใช้เมื่อเร็วๆ นี้แสดงให้เห็นว่าผู้ใช้ไม่ไว้วางใจเว็บไซต์ที่เพียงแค่แจ้งให้ผู้ใช้ระบุตําแหน่งของตนเมื่อโหลดหน้าเว็บ แนวทางปฏิบัติแนะนำมีอะไรบ้าง

สมมติว่าผู้ใช้จะไม่ระบุตำแหน่งของตน

ผู้ใช้จํานวนมากจะไม่ต้องการระบุตําแหน่งของคุณ คุณจึงต้องใช้รูปแบบการพัฒนาแบบป้องกัน

1. จัดการข้อผิดพลาดทั้งหมดจาก API ตำแหน่งทางภูมิศาสตร์เพื่อให้คุณปรับเปลี่ยนเว็บไซต์ให้เข้ากับเงื่อนไขนี้ได้
2. ระบุความต้องการในการใช้สถานที่อย่างชัดเจน
3. ใช้โซลูชันสำรองหากจำเป็น

ใช้การระบุตำแหน่งทางเลือกหากจำเป็นต้องระบุตำแหน่งทางภูมิศาสตร์

เราขอแนะนําว่าเว็บไซต์หรือแอปพลิเคชันของคุณไม่ควรกำหนดให้ต้องเข้าถึงตำแหน่งปัจจุบันของผู้ใช้ อย่างไรก็ตาม หากเว็บไซต์หรือแอปพลิเคชันของคุณต้องการตำแหน่งปัจจุบันของผู้ใช้ ก็มีโซลูชันของบุคคลที่สามที่ช่วยให้คุณคาดเดาได้อย่างดีที่สุดว่าบุคคลดังกล่าวอยู่ที่ไหน

โซลูชันเหล่านี้มักทำงานโดยดูที่อยู่ IP ของผู้ใช้และจับคู่กับที่อยู่จริงที่ลงทะเบียนกับฐานข้อมูล RIPE ตำแหน่งเหล่านี้มักไม่แม่นยำนัก โดยปกติแล้วจะเป็นการแสดงตำแหน่งของศูนย์กลางโทรคมนาคมหรือเสาสัญญาณโทรศัพท์มือถือที่อยู่ใกล้กับผู้ใช้มากที่สุด ในหลายกรณี ข้อมูลดังกล่าวอาจไม่ถูกต้องมากนัก โดยเฉพาะหากผู้ใช้ใช้ VPN หรือบริการพร็อกซีอื่นๆ

ขอสิทธิ์เข้าถึงตำแหน่งเสมอเมื่อผู้ใช้ทำท่าทาง

ตรวจสอบว่าผู้ใช้เข้าใจเหตุผลที่คุณขอตำแหน่งที่ตั้งของพวกเขา และประโยชน์ที่ผู้ใช้จะได้รับ การถามถึงในหน้าแรกทันทีเมื่อเว็บไซต์โหลด จะทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี

แต่ให้ใช้คำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่ชัดเจนหรือบ่งชี้ว่าการดำเนินการจะต้องเข้าถึงตำแหน่งของผู้ใช้แทน ผู้ใช้จึงเชื่อมโยงข้อความแจ้งขอการเข้าถึงกับการดำเนินการที่เพิ่งเริ่มต้นของระบบได้ง่ายขึ้น

ระบุตัวบ่งชี้ที่ชัดเจนว่าการดำเนินการจะร้องขอตำแหน่ง

ในการศึกษาของทีม Google Ads เมื่อมีการขอให้ผู้ใช้จองห้องพักโรงแรมในบอสตันสำหรับการประชุมที่จะมาถึงบนเว็บไซต์โรงแรมแห่งหนึ่ง ผู้ใช้ได้รับแจ้งให้แชร์ตำแหน่ง GPS ทันทีหลังจากแตะคำกระตุ้นให้ดำเนินการ "ค้นหาและจอง" บนหน้าแรก

ในบางกรณี ผู้ใช้อาจหงุดหงิดเพราะไม่เข้าใจว่าทำไมระบบจึงแสดงโรงแรมในซานฟรานซิสโกเมื่อต้องการจองห้องพักในบอสตัน

ประสบการณ์ที่ดีกว่าคือการทำให้ผู้ใช้เข้าใจว่าทำไมคุณถึงขอตำแหน่งของพวกเขา เพิ่มเครื่องหมายที่รู้จักซึ่งพบได้ทั่วไปในอุปกรณ์ทุกเครื่อง เช่น โปรแกรมค้นหาช่วง หรือคำกระตุ้นการตัดสินใจที่ชัดเจน เช่น "ค้นหาใกล้ฉัน"

กระตุ้นผู้ใช้เบาๆ เพื่อให้สิทธิ์เข้าถึงตำแหน่ง

คุณไม่มีสิทธิ์เข้าถึงสิ่งที่ผู้ใช้กำลังทำ คุณจะทราบได้อย่างชัดเจนเมื่อผู้ใช้ไม่อนุญาตให้เข้าถึงตำแหน่ง แต่จะไม่ทราบว่าผู้ใช้ให้สิทธิ์เข้าถึงเมื่อใด คุณจะทราบก็ต่อเมื่อผลการค้นหาปรากฏขึ้น

คุณควร "กระตุ้น" ผู้ใช้ให้ดำเนินการหากต้องการให้ดำเนินการให้เสร็จสมบูรณ์

เราขอแนะนำให้คุณดำเนินการดังต่อไปนี้

1. ตั้งค่าตัวจับเวลาที่จะเริ่มทำงานหลังจากช่วงเวลาสั้นๆ 5 วินาทีถือว่าคุ้มค่าแล้ว
2. หากได้รับข้อความแสดงข้อผิดพลาด ให้แสดงข้อความต่อผู้ใช้
3. หากได้รับการตอบกลับในเชิงบวก ให้ปิดใช้ตัวจับเวลาและประมวลผลผลลัพธ์
4. หากหลังจากหมดเวลาแล้ว คุณยังไม่ได้รับการตอบกลับเชิงบวก ให้แสดงการแจ้งเตือนต่อผู้ใช้
5. หากการตอบกลับเข้ามาในภายหลังและยังมีการแจ้งเตือนอยู่ ให้นำการแจ้งเตือนออกจากหน้าจอ

button.onclick = function () {
  var startPos;
  var nudge = document.getElementById('nudge');

  var showNudgeBanner = function () {
    nudge.style.display = 'block';
  };

  var hideNudgeBanner = function () {
    nudge.style.display = 'none';
  };

  var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);

  var geoSuccess = function (position) {
    hideNudgeBanner();
    // We have the location, don't display banner
    clearTimeout(nudgeTimeoutId);

    // Do magic with location
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    switch (error.code) {
      case error.TIMEOUT:
        // The user didn't accept the callout
        showNudgeBanner();
        break;
    }
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};

การสนับสนุนเบราว์เซอร์

ปัจจุบันเบราว์เซอร์ส่วนใหญ่รองรับ Geolocation API แต่คุณควรตรวจสอบการรองรับเสมอก่อนที่จะดำเนินการใดๆ

คุณสามารถตรวจสอบความเข้ากันได้ได้โดยง่ายด้วยการทดสอบหาออบเจ็กต์ตำแหน่งทางภูมิศาสตร์ ดังนี้

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
} else {
  console.log('Geolocation is not supported for this Browser/OS.');
}

การกำหนดตำแหน่งปัจจุบันของผู้ใช้

API ตำแหน่งทางภูมิศาสตร์มีเมธอด "แบบครั้งเดียว" ที่ง่ายดายในการรับตำแหน่งของผู้ใช้ ดังนี้ getCurrentPosition() การเรียกใช้เมธอดนี้แบบแอซิงโครนัสจะรายงานตำแหน่งปัจจุบันของผู้ใช้

window.onload = function () {
  var startPos;
  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  navigator.geolocation.getCurrentPosition(geoSuccess);
};

หากนี่เป็นครั้งแรกที่แอปพลิเคชันในโดเมนนี้ขอสิทธิ์ โดยทั่วไปเบราว์เซอร์จะตรวจสอบความยินยอมของผู้ใช้ นอกจากนี้ อาจมีค่ากําหนดในการอนุญาตหรือไม่อนุญาตการค้นหาสิทธิ์เสมอ ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ ซึ่งในกรณีนี้ ระบบจะข้ามกระบวนการยืนยัน

ออบเจ็กต์ตำแหน่งอาจมีข้อมูลมากกว่าแค่ละติจูดและลองจิจูด ทั้งนี้ขึ้นอยู่กับอุปกรณ์ตำแหน่งที่เบราว์เซอร์ใช้ เช่น อาจรวมถึงระดับความสูงหรือทิศทาง คุณไม่สามารถบอกได้ว่าระบบตำแหน่งใช้ข้อมูลใดเพิ่มเติมจนกว่าจะมีการส่งคืนข้อมูลดังกล่าวจริงๆ

การติดตามตําแหน่งของผู้ใช้

Geolocation API ช่วยให้คุณได้รับตําแหน่งของผู้ใช้ (เมื่อได้รับความยินยอมจากผู้ใช้) ด้วยการเรียกใช้ getCurrentPosition() เพียงครั้งเดียว

หากต้องการตรวจสอบตำแหน่งของผู้ใช้อย่างต่อเนื่อง ให้ใช้เมธอด Geolocation API watchPosition() โดยจะทำงานในลักษณะเดียวกันกับ getCurrentPosition() แต่จะทำงานหลายครั้งเหมือนกับซอฟต์แวร์ระบุตำแหน่ง

1. ล็อกผู้ใช้ได้แม่นยำมากขึ้น
2. ระบุว่าตำแหน่งของผู้ใช้กำลังเปลี่ยนแปลง

var watchId = navigator.geolocation.watchPosition(function (position) {
  document.getElementById('currentLat').innerHTML = position.coords.latitude;
  document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

กรณีที่ควรใช้ตำแหน่งทางภูมิศาสตร์เพื่อดูตำแหน่งของผู้ใช้

• คุณต้องการล็อกตำแหน่งของผู้ใช้ให้แม่นยำยิ่งขึ้น
• แอปพลิเคชันของคุณต้องอัปเดตอินเทอร์เฟซผู้ใช้ตามข้อมูลตำแหน่งใหม่
• แอปพลิเคชันต้องอัปเดตตรรกะทางธุรกิจเมื่อผู้ใช้เข้าสู่โซนที่กำหนด

แนวทางปฏิบัติแนะนำเมื่อใช้ตำแหน่งทางภูมิศาสตร์

ล้างและประหยัดแบตเตอรี่เสมอ

การตรวจสอบการเปลี่ยนแปลงตำแหน่งทางภูมิศาสตร์ไม่ใช่การดำเนินการอย่างอิสระ แม้ว่าระบบปฏิบัติการอาจเปิดตัวฟีเจอร์แพลตฟอร์มเพื่อให้แอปพลิเคชันเชื่อมต่อกับระบบย่อยทางภูมิศาสตร์ แต่ในฐานะนักพัฒนาเว็บ คุณไม่ทราบว่าการรองรับของอุปกรณ์ของผู้ใช้เป็นอย่างไรสำหรับการตรวจสอบตำแหน่งของผู้ใช้ และขณะที่คุณกำลังดูตำแหน่ง อุปกรณ์จะประมวลผลเพิ่มเติมอีกมาก

เมื่อคุณไม่จำเป็นต้องติดตามตำแหน่งของผู้ใช้แล้ว ให้โทรหา clearWatch เพื่อปิดระบบตำแหน่งทางภูมิศาสตร์

จัดการข้อผิดพลาดอย่างเหมาะสม

ขออภัย การค้นหาตำแหน่งบางรายการอาจไม่ประสบความสำเร็จ อาจหา GPS ไม่ได้ หรือผู้ใช้ปิดใช้งานการค้นหาตำแหน่งอย่างกะทันหัน ในกรณีที่เกิดข้อผิดพลาด ระบบจะเรียกอาร์กิวเมนต์ที่ไม่บังคับรายการที่ 2 ของ getCurrentPosition() เพื่อให้คุณแจ้งให้ผู้ใช้ทราบภายในการเรียกกลับได้ ดังนี้

window.onload = function () {
  var startPos;
  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };
  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};

ลดความจำเป็นในการเริ่มฮาร์ดแวร์ตำแหน่งทางภูมิศาสตร์

สำหรับกรณีการใช้งานหลายกรณี คุณไม่จำเป็นต้องใช้ตำแหน่งที่ตั้งล่าสุดของผู้ใช้ คุณเพียงแค่ต้องการค่าประมาณคร่าวๆ เท่านั้น

ใช้พร็อพเพอร์ตี้ที่ไม่บังคับ maximumAge เพื่อบอกให้เบราว์เซอร์ใช้ผลลัพธ์ตำแหน่งทางภูมิศาสตร์ที่เพิ่งได้รับ ซึ่งไม่เพียงแต่จะแสดงผลได้เร็วขึ้นหากผู้ใช้เคยขอข้อมูลมาก่อน แต่ยังป้องกันไม่ให้เบราว์เซอร์เริ่มอินเทอร์เฟซฮาร์ดแวร์ตำแหน่งทางภูมิศาสตร์ เช่น การหาตำแหน่งด้วยสัญญาณ Wi-Fi หรือ GPS

window.onload = function () {
  var startPos;
  var geoOptions = {
    maximumAge: 5 * 60 * 1000,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

ตั้งค่าการหมดเวลาเพื่อไม่ให้ผู้ใช้รอนาน

คำขอตำแหน่งปัจจุบันอาจไม่แสดงอีกเลย เว้นแต่คุณจะตั้งค่าการหมดเวลา

window.onload = function () {
  var startPos;
  var geoOptions = {
    timeout: 10 * 1000,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

ต้องการตำแหน่งคร่าวๆ มากกว่าตำแหน่งแบบละเอียด

หากคุณต้องการค้นหาร้านค้าที่อยู่ใกล้ผู้ใช้ที่สุด ไม่น่าจะต้องใช้ ความแม่นยำ 1 เมตร API ได้รับการออกแบบมาเพื่อให้ตําแหน่งคร่าวๆ ที่แสดงผลโดยเร็วที่สุด

หากต้องการความแม่นยำในระดับสูง คุณสามารถลบล้างการตั้งค่าเริ่มต้นได้ด้วยตัวเลือก enableHighAccuracy ให้จำกัดเท่าที่จำเป็น: จะแก้ปัญหาได้ช้ากว่า และใช้แบตเตอรี่มากขึ้น

window.onload = function () {
  var startPos;
  var geoOptions = {
    enableHighAccuracy: true,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

จำลองตำแหน่งทางภูมิศาสตร์ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เมื่อตั้งค่าตำแหน่งทางภูมิศาสตร์แล้ว คุณจะต้องดำเนินการต่อไปนี้

• ทดสอบวิธีการทำงานของแอปในตำแหน่งทางภูมิศาสตร์ต่างๆ
• ตรวจสอบว่าแอปของคุณมีประสิทธิภาพลดลงอย่างค่อยเป็นค่อยไปเมื่อตําแหน่งทางภูมิศาสตร์ไม่พร้อมใช้งาน

คุณสามารถดำเนินการทั้งสองอย่างได้จากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
2. กด Esc เพื่อเปิดลิ้นชักคอนโซล
3. เปิดเมนูลิ้นชักคอนโซล
4. คลิกตัวเลือกเซ็นเซอร์เพื่อแสดงแท็บเซ็นเซอร์

จากที่นี่ คุณสามารถลบล้างตำแหน่งเป็นเมืองหลักที่กำหนดไว้ล่วงหน้า ป้อนตำแหน่งที่กำหนดเอง หรือปิดใช้ตำแหน่งทางภูมิศาสตร์โดยตั้งค่าการลบล้างเป็นตำแหน่งไม่พร้อมใช้งาน

ความคิดเห็น