導航:首頁 > 地理科目 > jquery如何獲取地理位置
jquery如何獲取地理位置
發布時間：2022-04-01 13:09:04A. 用jquery如何實時獲取對象的坐標
jquery獲取當前元素的坐標
1，獲取對象
var obj = $("#id號"); 或 var obj = $(this);
實例中我獲取的對象是彈出窗口按鈕，這樣創建的新窗口就會根椐按鈕的位置進行調整，實例中將創建的新窗口顯示的按鈕的右下角。
2，獲取對象元素的位置(offset()方法)
var offset = obj.offset();
獲取對象元素的位置，分別是元素的top和left，調用方法是：offset.left和offset.top，可知當前對象的左部和頂部位置。
3，獲取對象元素的寬度(width()方法)
var right = offset.left+obj.width();
實例中是獲取對象的右下角位置，創建新窗口的左部位置。
4，獲取對象元素的高度(height()方法)
var down = offset.top+obj.height();
實例中是獲取對象的右下角位置，創建新窗口的頂部位置。
B. jquery 如何獲取滑鼠當前位置
獲取當前位置代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript獲得滑鼠位置</title>
</head>
<body>
<script>
<!-- 其中的參數e指的是事件-->
function mouseMove(ev)
{
Ev= ev || window.event;
var mousePos = mouseCoords(ev);
//獲取當前的x,y坐標
document.getElementByIdx_x_x_xx_x("xxx").value = mousePos.x;
document.getElementByIdx_x_x_xx_x("yyy").value = mousePos.y;
}
function mouseCoords(ev)
{
//滑鼠移動的位置
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return{
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onmousemove = mouseMove;
</script>
滑鼠X軸:
<input id=xxx type=text>
滑鼠Y軸:
<input id=yyy type=text>
</body>
C. jquery怎麼獲取元素距離屏幕的位置
$(window).height();//是文檔窗口高度
$("div").offset().top//是標簽距離頂部高度（沒有到下面的距離，比如$("div").offset().down）
$("div").offset().left//是標簽距離右邊高度（沒有到下面的距離，比如$("div").offset().right）
$(document).scrollTop();//是滾動條高度
$("div").height();//是標簽高度
你要的高度+$("div").height()+[$("div").offset().top-$(document).scrollTop()]=$(window).height();
經過簡單的數學變換即可得到你要的值了
獲取頁面某一元素的絕對X,Y坐標，可以用offset()：
var X = $(『#DivID』).offset().top;
var Y = $(『#DivID』).offset().left;
獲取相對(父元素)位置:
var X = $(『#DivID』).position().top;
var Y = $(『#DivID』).position().left;
通過getBoundingClientRect方法獲取對象位置，包含： left , top , right , bottom 4個參數值。
D. 關於jquery獲得元素絕對位置的問題，定位問題
原因很不好判定，這種方式定位出現錯誤的原因挺多的，要考慮css和html的具體寫法，有時候某些不標準的寫法會造成jQuery的定位數據不準確。
建議換個方式，例如每個<tr>中第一列放置一個<th></th>，後面是<td>，然後你的紅框放到<th>裡面，這樣計算量就小多了，而且顯示的也快一點。
E. jquery查找字元串,並且定位到字元串所在位置
indexOf() 和 lastIndexOf() 是js的用法，與jquery是無關的，所有直接用原生js就可以了。
indexOf() 和 lastIndexOf() 方法返回的都是指定的子串在另一個字元串中的位置，如果沒有找不到子串，則返回 -1。
這兩個方法的不同之處在於，indexOf() 方法是從字元串的開頭（位置 0）開始檢索字元串，而 lastIndexOf() 方法則是從字元串的結尾開始檢索子串。
strObj.indexOf(subString[, startIndex]) 參 數 strObj 必選項。String 對象或文字，要在 String 對象中查找的子字元 串。 starIndex 可選項。該整數值指出在 String 對象內開始查找的索引。如果省略，則從字元串的開始處查找。
說明 indexOf 方法返回一個整數值，指出 String 對象內子字元串的開始位置。如果沒有找到子字元串，則返回 -1。 如果 startindex 是負數，則 startindex 被當作零。如果它比最大的字元位置索引還大，則它被當作最大的可能索引。 從左向右執行查找。否則，該方法與 lastIndexOf 相同。
例子: [CODE_HTML] [/CODE_HTML] 最後得到的結果是-1,0,3
if(ss.indexOf('winner')>-1)
strobj.indexOf(substring[, startindex])
其中strobj是必選項。string 對象或文字
F. jquery怎麼根據精度和緯度顯示當前地址
使用class="{}"的方式，必須引入包：jquery.metadata.js；
可以使用如下的方法，修改提示內容：class="{required:true,minlength:5,messages:{required:'請輸入內容'}}"；
在使用equalTo關鍵字時，後面的內容必須加上引號，如下代碼：class="{required:true,minlength:5,equalTo:'#password'}"。
G. html5+怎麼獲取當前地理位置
定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的現代瀏覽器上運行，特別是手持設備如iphone，地理定位更加精確。首先我們要檢測用戶設備瀏覽器是否支持地理定位，如果支持則獲取地理信息。注意這個特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的，所以我們在訪問該應用時會提示是否允許地理定位，我們當然選擇允許即可。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("瀏覽器不支持地理定位。");
}
}
上面的代碼可以知道，如果用戶設備支持地理定位，則運行 getCurrentPosition() 如果getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象，getCurrentPosition() 方法的第二個參數showError用於處理錯誤，它規定當獲取用戶位置失敗時運行的函數。
我們先來看一下函數showError(),它規定獲取用戶地理位置失敗時的一些錯誤代碼處理方式：
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獲取到的經緯度信息傳給地圖介面，則會返回用戶所在的地理位置，包括省市區信息，甚至有街道、門牌號等詳細的地理位置信息。
我們首先在頁面定義要展示地理位置的div，分別定義id#_geo和id#google_geo。我們只需修改關鍵函數showPosition()。先來看網路地圖介面交互，我們將經緯度信息通過Ajax方式發送給網路地圖介面，介面會返回相應的省市區街道信息。網路地圖介面返回的是一串JSON數據，我們可以根據需求將需要的信息展示給div#_geo。注意這里用到了jQuery庫，需要先載入jQuery庫文件。
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.longitude;
//
var url = "<a href="http://api.map..com/geocoder/v2/?ak=&callback=renderReverse&location="+latlon+"&output=json&pois=0">http://api.map..com/geocoder/v2/?ak=&callback=renderReverse&location="+latlon+"&output=json&pois=0</a>";
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
beforeSend: function(){
$("#_geo").html('正在定位...');
},
success: function (json) {
if(json.status==0){
$("#_geo").html(json.result.formatted_address);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#_geo").html(latlon+"地址位置獲取失敗");
}
});
});
再來看谷歌地圖介面交互。同樣我們將經緯度信息通過Ajax方式發送給谷歌地圖介面，介面會返回相應的省市區街道詳細信息。谷歌地圖介面返回的也是一串JSON數據，這些JSON數據比網路地圖介面返回的要更詳細，我們可以根據需求將需要的信息展示給div#google_geo。
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+"地址位置獲取失敗");
}
});
}
H. jquery中怎麼獲取當前的路徑
直接用js就可以獲取到window.location就可以獲取到
I. jquery當前位置怎麼做
yload做了個demo如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script language="javascript" src="/js/jquery-1.4.4.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--//
$(document).ready(function(){
$(window).bind("scroll", function(event){
$("div").each(function(){
var fold = $(window).height() + $(window).scrollTop();
if( fold <= $(this).offset().top){
$(this).trigger("appear");
}
});
});
$("div").each(function(){
if( $(window).height() > $(this).offset().top){
$(this).html("出現在可視區域");
}
$(this).one("appear",function(){
$(this).html("出現在可視區域");
});
});
});
//-->
</script>
</head>
<body>
<div>111</div>
<div>1111</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div showed = "N">111111111111</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div showed = "N">111111111111</div>
</body>
</html>
與jquery如何獲取地理位置相關的資料
- 華為手機家人共享如何查看地理位置
- 中考初中地理如何補
- 如何回答地理是什麼
- 如何畫出四大地理地區
- 內烏肯地理優勢是什麼
- 地理隔離指什麼意思
- 地理教學目標評價怎麼寫
- 地理實體數據指什麼
- 地理人教版長什麼樣圖片
- 地理看什麼書好
- 金立手機怎麼找地理位置
- 如何落實地理的學科素養
- 地理如何描述氣候
- 地理79折算相當多少
- 地理空間雲下載的dem怎麼打開
- 想學好地理怎麼學
- 遼師大海洋人文地理怎麼樣
- 地理相關專業考公務員可以考什麼
- 地理一本塗書和知識清單哪個好
- 生物地理中考c是多少分
- 江蘇徐州地理是什麼版本的
- 高中地理怎麼判斷吹什麼風
- 地理上的陡崖是指什麼
- 我的等一本地理啟蒙書多少元書
- 如何介紹一本地理教輔用書
- 地理信息系統開發流程是什麼
- 本科地理學什麼
- cad編輯器地理位置怎麼編輯
- 知道微信號怎麼查詢地理位置
- 怎麼在地理數據雲下載數據分析
- 地理考研哪個方面容易
- 視頻地理的風向怎麼看
- 晉城初中地理教材用什麼版本
- 什麼網課上地理好
- 高中地理教輔哪個好
- 怎麼看天文地理
- 計量地理學自回歸分析的理論依據是什麼
- 安慶師范大學地理科學專業屬於哪個學院
- 我國耕地類型有哪些地理
- 中國戰略的地理特點是什麼
- 考高中地理教資需要准備什麼資料
- 如何保存微信的地理位置