Cara menggunakan function_jquery geolokasi HTML5

HTML5 menyediakan fungsi geolokasi (Geolocation API), yang boleh menentukan lokasi pengguna Kami boleh menggunakan ciri HTML5 ini untuk membangunkan aplikasi berdasarkan maklumat geolokasi. Artikel ini menggunakan contoh untuk berkongsi dengan anda cara menggunakan HTML5 dan menggunakan antara muka Baidu dan Peta Google untuk mendapatkan maklumat lokasi geografi pengguna yang tepat.

Geolokasi ialah ciri baharu HTML5, jadi ia hanya boleh dijalankan pada penyemak imbas moden yang menyokong HTML5, terutamanya peranti pegang tangan seperti iPhone, di mana geolokasi lebih tepat. Mula-mula kita perlu mengesan sama ada penyemak imbas peranti pengguna menyokong geolokasi, dan jika ya, dapatkan maklumat geografi tersebut. Ambil perhatian bahawa ciri ini mungkin melanggar privasi pengguna Melainkan pengguna bersetuju, maklumat lokasi pengguna tidak tersedia Oleh itu, apabila kami mengakses aplikasi, kami akan digesa sama ada untuk membenarkan geolokasi .

function getLocation(){
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition,showError);
  }else{
    alert("浏览器不支持地理定位。");
  }
}

Kod di atas boleh mengetahui bahawa jika peranti pengguna menyokong geolokasi, kaedah getCurrentPosition() dijalankan. Jika getCurrentPosition() berjalan dengan jayanya, objek koordinat dikembalikan kepada fungsi yang dinyatakan dalam parameter showPosition Parameter kedua showError kaedah getCurrentPosition() digunakan untuk mengendalikan ralat .
Mari lihat dahulu fungsi showError(), yang menetapkan beberapa kaedah pengendalian kod ralat apabila gagal mendapatkan lokasi geografi pengguna:

function showError(error){
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert("定位失败,用户拒绝请求地理定位");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("定位失败,位置信息是不可用");
      break;
    case error.TIMEOUT:
      alert("定位失败,请求获取用户位置超时");
      break;
    case error.UNKNOWN_ERROR:
      alert("定位失败,定位系统失效");
      break;
  }
}

Mari kita lihat fungsi showPosition() sekali lagi, memanggil latitud dan longitud koordinat untuk mendapatkan latitud dan longitud pengguna.

function showPosition(position){
  var lat = position.coords.latitude; //纬度
  var lag = position.coords.longitude; //经度
  alert('纬度:'+lat+',经度:'+lag);
}

Gunakan antara muka Peta Baidu dan Peta Google untuk mendapatkan alamat pengguna
Di atas kami mengetahui bahawa Geolokasi HTML5 boleh mendapatkan longitud dan latitud pengguna, jadi apa yang perlu kami lakukan ialah menukar longitud dan latitud abstrak kepada maklumat lokasi geografi pengguna sebenar yang boleh dibaca dan bermakna. Nasib baik, Peta Baidu dan Peta Google menyediakan antara muka dalam hal ini Kami hanya perlu menghantar maklumat longitud dan latitud yang diperolehi oleh HTML5 ke antara muka peta, dan lokasi geografi pengguna akan dikembalikan, termasuk maklumat wilayah dan bandar, dan juga jalan, Nombor rumah dan maklumat lokasi geografi terperinci lain.
Kami mula-mula menentukan div untuk memaparkan lokasi geografi pada halaman, masing-masing mentakrifkan id#baidu_geo dan id#google_geo. Kita hanya perlu mengubah suai fungsi utama showPosition(). Mari lihat dahulu interaksi antara muka peta Baidu Kami menghantar maklumat latitud dan longitud ke antara muka peta Baidu melalui Ajax, dan antara muka akan mengembalikan maklumat wilayah, bandar dan jalan yang sepadan. Antara muka peta Baidu mengembalikan rentetan data JSON Kami boleh memaparkan maklumat yang diperlukan untuk div#baidu_geo mengikut keperluan kami. Ambil perhatian bahawa perpustakaan jQuery digunakan di sini dan fail perpustakaan jQuery perlu dimuatkan terlebih dahulu.

function showPosition(position){
  var latlon = position.coords.latitude+','+position.coords.longitude;

  //baidu
  var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0";
  $.ajax({
    type: "GET",
    dataType: "jsonp",
    url: url,
    beforeSend: function(){
      $("#baidu_geo").html('正在定位...');
    },
    success: function (json) {
      if(json.status==0){
        $("#baidu_geo").html(json.result.formatted_address);
      }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#baidu_geo").html(latlon+"地址位置获取失败");
    }
  });
});

Mari lihat interaksi antara muka Peta Google. Begitu juga, kami menghantar maklumat latitud dan longitud ke antara muka Peta Google melalui Ajax, dan antara muka akan mengembalikan butiran wilayah, bandar dan jalan yang sepadan. Antara muka peta Google juga mengembalikan rentetan data JSON ini lebih terperinci daripada yang dikembalikan oleh antara muka peta Baidu Kami boleh memaparkan maklumat yang diperlukan untuk div#google_geo mengikut keperluan kami.

function showPosition(position){
  var latlon = position.coords.latitude+','+position.coords.longitude;

  //google
  var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN';
  $.ajax({
    type: "GET",
    url: url,
    beforeSend: function(){
      $("#google_geo").html('正在定位...');
    },
    success: function (json) {
      if(json.status=='OK'){
        var results = json.results;
        $.each(results,function(index,array){
          if(index==0){
          $("#google_geo").html(array['formatted_address']);
          }
        });
      }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#google_geo").html(latlon+"地址位置获取失败");
    }
  });
}

Kod di atas mengintegrasikan antara muka peta Baidu dan antara muka peta Google ke dalam fungsi showPosition() masing-masing, yang boleh kita panggil mengikut situasi sebenar. Sudah tentu, ini hanyalah aplikasi mudah Kami boleh membangunkan banyak aplikasi yang kompleks berdasarkan contoh mudah ini. Adalah disyorkan untuk menggunakan pelayar mudah alih untuk mengakses demonstrasi DEMO.