รับตำแหน่ง GPS จากเว็บเบราว์เซอร์


165

ฉันกำลังพัฒนาเว็บไซต์บนมือถือที่นั่นฉันได้รวม Google Maps เข้าด้วยกันฉันต้องกรอกฟิลด์ 'จาก' ของ Google Maps แบบไดนามิก

เป็นไปได้หรือไม่ที่จะรับตำแหน่ง GPS จากเว็บเบราว์เซอร์และเติมลงในฟิลด์ 'จาก' ของ Google Map แบบไดนามิก?


2
โทรศัพท์มือถือแบบใดที่คุณต้องการให้การสนับสนุน?
Rowland Shaw

ฉันต้องการสนับสนุนเบราว์เซอร์มือถือทั้งหมด แต่ i-phone มีความสำคัญสูง
Ganesh

คุณอาจจะดีกว่าที่จะเขียนแอพแบบเนทีฟเพราะมันจะช่วยให้สามารถผนวกรวมกับฮาร์ดแวร์ได้อย่างแน่นหนากว่านี้
Rowland Shaw

16
หากความต้องการนั้นเกี่ยวกับตำแหน่งเท่านั้นแอพที่เป็นเจ้าของนั้นจะทำงานหนักเกินไป iOS ไม่ใช่มือถือเท่านั้นมันเป็นเพียงความสำคัญ
Gonçalo Veiga

คำตอบ:


195

หากคุณใช้Geolocation APIมันจะง่ายเหมือนการใช้รหัสต่อไปนี้

navigator.geolocation.getCurrentPosition(function(location) {
  console.log(location.coords.latitude);
  console.log(location.coords.longitude);
  console.log(location.coords.accuracy);
});

คุณอาจใช้API ตำแหน่งของลูกค้าของ Googleได้

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


API ตำแหน่ง Google Client ยังคงอยู่หรือไม่ ลิงก์ที่ให้ไปยัง Google Loader
Shane N

1
ฉันไม่เห็นมันในหน้านั้นเป็นหนึ่งใน API ที่มีอยู่ - คุณสามารถใช้ Google Latitude API ได้: code.google.com/apis/latitude - ด้วยวิธีนี้คุณสามารถรับตำแหน่งปัจจุบันของลูกค้าได้: code.google.com/apis/latitude/v1/
......

1
สำหรับผู้อ่านในอนาคตความถูกต้องเป็นวัดในเมตร
johnnyRose

Hyy เราสามารถเปิดใช้งานตำแหน่งการแชร์ได้โดยอัตโนมัติผ่านการเข้ารหัส
นายโทมาร์

2
สิ่งนี้ร้องขอการใช้ตำแหน่งของคุณหรือไม่
แจ็ค

21

เพื่อให้คำตอบที่เฉพาะเจาะจงมากขึ้น HTML5 ช่วยให้คุณรับพิกัดทางภูมิศาสตร์และทำงานได้ค่อนข้างดี ภาพรวมเบราว์เซอร์รองรับการระบุตำแหน่งได้ค่อนข้างดีเบราว์เซอร์หลักทั้งหมดยกเว้น ie7 และ ie8 (และ opera mini) IE9 ทำงานได้ แต่เป็นนักแสดงที่แย่ที่สุด ชำระเงิน caniuse.com:

http://caniuse.com/#search=geol

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


dotnetcurry.com/aspnet-mvc/782/…เป็นข้อมูลอ้างอิงที่มีประโยชน์สำหรับการใช้งานในสภาพแวดล้อมmVC ของ asp.net
Walter de Jong

13

ใช้สิ่งนี้และคุณจะพบข้อมูลทั้งหมดได้ที่http://www.w3schools.com/html/html5_geolocation.asp

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}
</script>

1
เพียงแค่ทราบ: getCurrentPosition () และ watchPosition () ไม่ทำงานบนต้นกำเนิดที่ไม่ปลอดภัยอีกต่อไป ในการใช้คุณสมบัตินี้คุณควรพิจารณาเปลี่ยนแอปพลิเคชันของคุณเป็นแหล่งกำเนิดที่ปลอดภัยเช่น HTTPS
2589273

4

มีGeoLocation APIแต่การสนับสนุนเบราว์เซอร์ค่อนข้างบางในปัจจุบัน ไซต์ส่วนใหญ่ที่ใส่ใจกับสิ่งต่าง ๆ เหล่านี้ใช้ฐานข้อมูล GeoIP (โดยมีข้อแนะนำตามปกติเกี่ยวกับความไม่ถูกต้องของระบบดังกล่าว) นอกจากนี้คุณยังสามารถมองไปที่การให้บริการของบุคคลที่สามที่ต้องใช้ความร่วมมือของผู้ใช้เช่นFireEagle


1
ขอบคุณมากสำหรับการตอบสนองที่รวดเร็วของคุณ ถ้าเป็นไปได้คุณสามารถให้ฉันเคล็ดลับบางอย่างเพิ่มเติม ...
พระพิฆเนศ

2

น่าติดตาม

/*
  function geo_success(position) {
    do_something(position.coords.latitude, position.coords.longitude);
  }

  function geo_error() {
    alert("Sorry, no position available.");
  }

  var geo_options = {
    enableHighAccuracy: true,
    maximumAge        : 30000,
    timeout           : 27000
  };

  var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
  */
  getLocation(): Observable<Position> {
    return Observable.create((observer) => {
      const watchID = navigator.geolocation.watchPosition((position: Position) => {
        observer.next(position);
      });
      return () => {
        navigator.geolocation.clearWatch(watchID);
      };
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.