學習HTML5獲取地理位置定位信息--(經過百度地圖API，google地圖API的兩種方式)

時間  2019-11-13
標籤 學習 html5 html 獲取 地理位置 定位 信息 經過 百度 地圖 api google 兩種 方式 欄目 HTML5 简体版
原文   原文鏈接

前言：它是依賴於 百度地圖API或google地圖API 的功能，而且要容許定位；html

思想：h5方式僅能獲取到經緯度，經過獲得的經緯度而後ajax調用百度地圖和谷歌地圖等提供的這方面的接口，才獲取到的具體位置信息。jquery

HTML5提供了地理位置定位功能（Geolocation API），能肯定用戶位置，咱們能夠藉助HTML5的該特性開發基於地理位置信息的應用。本文結合實例給你們分享如何使用HTML5，藉助百度、谷歌地圖接口來獲取用戶準確的地理位置信息。git

如何使用HTML5地理位置定位功能

定位功能（Geolocation）是HTML5的新特性，所以只有在支持HTML5的現代瀏覽器上運行，特別是手持設備如iphone，地理定位更加精確。首先咱們要檢測用戶設備瀏覽器是否支持地理定位，若是支持則獲取地理信息。注意這個特性可能侵犯用戶的隱私，除非用戶贊成，不然用戶位置信息是不可用的，因此咱們在訪問該應用時會提示是否容許地理定位，咱們固然選擇容許便可。ajax

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

上面的代碼能夠知道，若是用戶設備支持地理定位，則運行 getCurrentPosition() 方法。若是getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象，getCurrentPosition() 方法的第二個參數showError用於處理錯誤，它規定當獲取用戶位置失敗時運行的函數。json

咱們先來看函數showError()，它規定獲取用戶地理位置失敗時的一些錯誤代碼處理方式：api

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; 
    } 
} 

咱們再來看函數showPosition(),調用coords的latitude和longitude便可獲取到用戶的緯度和經度。瀏覽器

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

利用百度地圖和谷歌地圖接口獲取用戶地址

上面咱們瞭解了HTML5的Geolocation能夠獲取用戶的經緯度，那麼咱們要作的是須要把抽象的經緯度轉成可讀的有意義的真正的用戶地理位置信息。幸運的是百度地圖和谷歌地圖等提供了這方面的接口，咱們只須要將HTML5獲取到的經緯度信息傳給地圖接口，則會返回用戶所在的地理位置，包括省市區信息，甚至有街道、門牌號等詳細的地理位置信息。iphone

咱們首先在頁面定義要展現地理位置的div，分別定義id#baidu_geo和id#google_geo。咱們只需修改關鍵函數showPosition()。先來看百度地圖接口交互，咱們將經緯度信息經過Ajax方式發送給百度地圖接口，接口會返回相應的省市區街道信息。百度地圖接口返回的是一串JSON數據，咱們能夠根據需求將須要的信息展現給div#baidu_geo。注意這裏用到了jQuery庫，須要先加載jQuery庫文件。函數

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+"地址位置獲取失敗");  
        } 
    }); 
}); 

再來看谷歌地圖接口交互。一樣咱們將經緯度信息經過Ajax方式發送給谷歌地圖接口，接口會返回相應的省市區街道詳細信息。谷歌地圖接口返回的也是一串JSON數據，這些JSON數據比百度地圖接口返回的要更詳細，咱們能夠根據需求將須要的信息展現給div#google_geo。jsonp

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+"地址位置獲取失敗");  
        }  
    }); 
} 

以上的代碼分別將百度地圖接口和谷歌地圖接口整合到函數showPosition()中，咱們能夠根據實際狀況進行調用。固然這只是一個簡單的應用，咱們能夠根據這個簡單的示例開發出不少複雜的應用

貼上本身調試的代碼：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>地址</title>
<script src="js/jquery-1.11.1.min.js"></script>
</head>

<body>
<button id="getLocations1">獲取地址--百度地圖API</button>
<br>
<br>
<fieldset>
<legend style="color:red">百度地圖API</legend>
<div style="color:green;font-weight: 900;">詳細地址爲：<span id="baidu_geo"></span></div>
<div>省：<span id="province1"></span></div>
<div>市：<span id="city1"></span></div>
<div>區：<span id="district1"></span></div>
</fieldset>
<br>
<br>
<br>
<br>
<button id="getLocations2">獲取地址--谷歌地圖API</button>
<br>
<br>
<fieldset>
<legend style="color:red">谷歌地圖API</legend>
<div style="color:green;font-weight: 900;">詳細地址爲：<span id="google_geo"></span></div>
<div>省：<span id="province2"></span></div>
<div>市：<span id="city2"></span></div>
<div>區：<span id="district2"></span></div>
</fieldset>
</body>
<script>
$(function() {
$('#getLocations1').click(getLocation1);

function getLocation1() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition1, showError1);
} else {
alert("瀏覽器不支持地理定位。");
}
}

function showError1(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;
}
}

// function showPosition(position) {
// var lat = position.coords.latitude; //緯度
// var lag = position.coords.longitude; //經度
// console.log('緯度:' + lat + ',經度:' + lag);
// }

//百度地圖API
function showPosition1(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";
console.log('經緯度：' + latlon);
console.log('百度地圖API地址：' + url);
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
beforeSend: function() {
$("#baidu_geo").html('正在定位...');
},
success: function(data) {
console.log(data.result);
if (data.status == 0) {
$("#baidu_geo").html(data.result.formatted_address);
$("#province1").html(data.result.addressComponent.province);
$("#city1").html(data.result.addressComponent.city);
$("#district1").html(data.result.addressComponent.district);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#baidu_geo").html(latlon + "地址位置獲取失敗");
}
});
}

$('#getLocations2').click(getLocation2);

function getLocation2() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition2, showError2);
} else {
alert("瀏覽器不支持地理定位。");
}
}

function showError2(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;
}
}
//google地圖API
function showPosition2(position) {
var latlon = position.coords.latitude + ',' + position.coords.longitude;

//google
var url = 'http://maps.google.cn/maps/api/geocode/json?latlng=' + latlon + '&language=CN';
console.log('經緯度：' + latlon);
console.log('百度地圖API地址：' + url);
$.ajax({
type: "GET",
url: url,
beforeSend: function() {
$("#google_geo").html('正在定位...');
},
success: function(data) {
console.log(data.results);
if (data.status == 'OK') {
var results = data.results;
$.each(results, function(index, array) {
if (index == 0) {
$("#google_geo").html(array['formatted_address']);
}
if (index == 1) {
$.each(array['address_components'], function(index, array) {
console.log(index, array);
if (index == 2) {
$("#province2").html(array.short_name);
}
if (index == 1) {
$("#city2").html(array.short_name);
}
if (index == 0) {
$("#district2").html(array.short_name);
}
});
}
});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#google_geo").html(latlon + "地址位置獲取失敗");
}
});
}
});
</script>

</html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程