Geolocation API

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

Web ส่วนขยายที่ต้องการใช้วัตถุ Geolocation ต้องเพิ่ม"geolocation"สิทธิ์ในการแสดงรายการ ระบบปฏิบัติการของผู้ใช้จะแจ้งให้ผู้ใช้อนุญาตการเข้าถึงตำแหน่งในครั้งแรกที่มีการร้องขอ

แนวคิดและการใช้งาน

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

Geolocation API เข้าถึงได้ผ่านการเรียก navigator.geolocation; สิ่งนี้จะทำให้เบราว์เซอร์ของผู้ใช้ถามเพื่อขออนุญาตเข้าถึงข้อมูลตำแหน่งของพวกเขา หากพวกเขายอมรับเบราว์เซอร์จะใช้ฟังก์ชันการทำงานที่ดีที่สุดบนอุปกรณ์เพื่อเข้าถึงข้อมูลนี้ (ตัวอย่างเช่น GPS)

นักพัฒนาซอฟต์แวร์สามารถเข้าถึงข้อมูลตำแหน่งนี้ได้สองวิธี:

• Geolocation.getCurrentPosition(): ดึงตำแหน่งปัจจุบันของอุปกรณ์
• Geolocation.watchPosition(): ลงทะเบียนฟังก์ชั่นการจัดการที่จะถูกเรียกโดยอัตโนมัติทุกครั้งที่มีการเปลี่ยนตำแหน่งของอุปกรณ์โดยคืนตำแหน่งที่อัปเดต

ในทั้งสองกรณีการเรียกใช้เมธอดใช้เวลาถึงสามอาร์กิวเมนต์:

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Geolocation อ่านใช้ Geolocation API

อินเตอร์เฟซ

Geolocation

คลาสหลักของ API นี้ - ประกอบด้วยวิธีการดึงข้อมูลตำแหน่งปัจจุบันของผู้ใช้เฝ้าดูการเปลี่ยนแปลงตำแหน่งและล้างนาฬิกาที่ตั้งไว้ก่อนหน้านี้

GeolocationPosition

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

GeolocationCoordinates

แสดงเรียงลำดับของตำแหน่งที่มีการเชื่อมโยงGeolocationCoordinatesและข้อมูลอื่น ๆ ที่สำคัญ

GeolocationPositionError

A GeolocationPositionErrorถูกส่งคืนโดยการเรียกที่ไม่สำเร็จไปยังหนึ่งในวิธีการที่อยู่ภายใน Geolocation, ภายในการเรียกกลับข้อผิดพลาดและมีรหัสข้อผิดพลาดและข้อความ

Navigator.geolocation

API เข้าสู่ระบบส่งคืนวัตถุ ตำแหน่งทางภูมิศาสตร์

พจนานุกรม

PositionOptions

แสดงให้เห็นถึงเนื้อหาที่มีตัวเลือกที่จะผ่านการเก็บของ Geolocation.getCurrentPosition() และ Geolocation.watchPosition()

ตัวอย่าง

body {
  padding: 20px;
  background-color:#ffffc9
}

button {
  margin: .5rem 0;
}

<button id = "find-me">Show my location</button><br/>
<p id = "status"></p>
<a id = "map-link" target="_blank"></a>

function geoFindMe() {

  const status = document.querySelector('#status');
  const mapLink = document.querySelector('#map-link');

  mapLink.href = '';
  mapLink.textContent = '';

  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = '';
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
  }

  function error() {
    status.textContent = 'Unable to retrieve your location';
  }

  if(!navigator.geolocation) {
    status.textContent = 'Geolocation is not supported by your browser';
  } else {
    status.textContent = 'Locating…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

}

document.querySelector('#find-me').addEventListener('click', geoFindMe);

ข้อมูลจำเพาะ

ความเข้ากันได้ของเบราว์เซอร์

ความพร้อมใช้งาน

เนื่องจาก Google เป็นผู้ให้บริการระบุตำแหน่งผ่าน WiFi ดังนั้นวานิลลา Geolocation API จึงอาจไม่ด้านใช้งานพนักงานพนักงานได้ในห้างหุ้นส่วนจำกัดห้างหุ้นส่วนจำกัดออกออกประเทศจีนที่ที่คุณคุณที่คุณคุณอาจจะใช้ที่คุณคุณคุณผู้ให้บริการบุคคลที่สามในห้างหุ้นส่วนจำกัดห้างหุ้นส่วนจำกัดท้องถิ่นเช่นBaidu , AutoNaviหรือTencent บริการเหล่านี้ที่อยู่ IP ของผู้ใช้และ / หรือระบุตำแหน่งที่ดีขึ้น

ดูสิ่งนี้ด้วย

• ใช้ Geolocation API
• API ตำแหน่งทางภูมิศาสตร์บน w3.org
• ใครรู้ตำแหน่งของฉัน (บล็อก Hacks)