根據HTML5 獲取當前位置的經緯度【百度地圖】【高德地圖】

是想讓地圖的定位用戶位置更準確一些。

查看了介紹:?http://www.w3school.com.cn/html5/html_5_geolocation.asp

看介紹中拿數據挺簡單。

?

<!DOCTYPE html>
<html>
<body>
<p id="demo">點擊這個按鈕,獲得您的坐標:</p>
<button onclick="getLocation()">試一下</button>
<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>
</body>
</html>

?

正確點擊按鈕能拿到返回的經緯度

有個問題是: ? ?navigator.geolocation.getCurrentPosition(showPosition); ? 這個回調,有時有,有時沒有 ,不穩定。 ?還有就是出來的經緯度弄到地圖上,我了個去,跑到廣州了。。。

?

--------------------------------------

本身百度地圖api?

ip定位: ??http://lbsyun.baidu.com/jsdemo.htm#i8_2 , ?有點糙,顯示的是城市名

瀏覽器定位: ?http://lbsyun.baidu.com/jsdemo.htm#i8_1 ? ,拿到經緯度展示,大概的。

?

百度有個?Geolocation, 打開上面的2個中一個,替換下<script>代碼如下,執行下

<script type="text/javascript">// 百度地圖API功能var map = new BMap.Map("allmap");var point = new BMap.Point(116.331398,39.897445);map.centerAndZoom(point,12);var geolocation = new BMap.Geolocation();  //實例化瀏覽器定位對象。//下面是getCurrentPosition方法。調用該對象的getCurrentPosition(),與HTML5不同的是,這個方法原型是getCurrentPosition(callback:function[, options: PositionOptions]),也就是說無論成功與否都執行回調函數1,第二個參數是關于位置的選項。 因此能否定位成功需要在回調函數1中自己判斷。
geolocation.getCurrentPosition(function(r){   //定位結果對象會傳遞給r變量if(this.getStatus() == BMAP_STATUS_SUCCESS){  //通過Geolocation類的getStatus()可以判斷是否成功定位。var mk = new BMap.Marker(r.point);    //基于定位的這個點的點位創建markermap.addOverlay(mk);    //將marker作為覆蓋物添加到map地圖上map.panTo(r.point);   //將地圖中心點移動到定位的這個點位置。注意是r.point而不是r對象。alert('您的位置:'+r.point.lng+','+r.point.lat);  //r對象的point屬性也是一個對象,這個對象的lng屬性表示經度,lat屬性表示緯度。}else {alert('failed'+this.getStatus());}        
},{enableHighAccuracy: true})
</script>

  

得到的是大致的經緯度,但城市是對的,位置有些偏差。

?-----------------------------

?

這個功能上,高德地圖api更好一些 ,誤差很小。

自定義定位圖標:?http://lbs.amap.com/api/javascript-api/example/location/custom-location-icon

?

瀏覽器定位:http://lbs.amap.com/api/javascript-api/example/location/browser-location

/***************************************
由于Chrome、IOS10等已不再支持非安全域的瀏覽器定位請求,為保證定位成功率和精度,請盡快升級您的站點到HTTPS。
***************************************/

?

?

很準的說, 需要升級 https

轉載于:https://www.cnblogs.com/jshare/p/7066154.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/254270.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/254270.shtml
英文地址,請注明出處:http://en.pswp.cn/news/254270.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

C#抽象類與密封類-abstract-sealed

文章目錄抽象類和抽象方法實現抽象方法接口、類和抽象類密封類博主寫作不容易&#xff0c;孩子需要您鼓勵 萬水千山總是情 , 先點個贊行不行 如果說繼承是面向對象設計理論的基石&#xff0c;那么抽象理論和方法就是繼承理論的頂梁柱。 抽象類和抽象方法 簡單的說&#x…

vs2010快捷鍵

Ctrl M O: 折疊所有方法 Ctrl M M: 折疊或者展開當前方法 Ctrl M L: 展開所有方法 1、強迫智能感知&#xff1a;CtrlJ&#xff1b;2、強迫智能感知顯示參數信息&#xff1a;Ctrl-Shift-空格&#xff1b;3、格式化整個塊&#xff1a;CtrlKF4、檢查括號匹配(在左右括號間切…

startup畢業論文

今天起得相對比較晚&#xff0c;為的是一個沒有目的面試&#xff0c;去了的結果。只是打擊一下自己的自信心&#xff0c;走的時候&#xff0c;面試官冷冷的說了一句&#xff0c;你的面試到此結束&#xff0c;是的&#xff0c;我并沒有很傷心&#xff0c;在門外等面試的時候&…

Javascript實現信息滾動效果的方法

<html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>向上無縫滾動</title><style>body { font-size: 12px; line-height: 24px; text-algin: center; /* 頁面內容居中 */}* { ma…

C# delegate與event,委托與事件

文章目錄委托示例事件實例博主寫作不容易&#xff0c;孩子需要您鼓勵 萬水千山總是情 , 先點個贊行不行 委托和事件是C#中兩個比較復雜的概念&#xff0c;這篇文章介紹兩個概念與基本用法&#xff0c;讓大家理解C#中的事件處理機制。 委托 委托也叫代理&#xff0c;就是把…

路由器與交換機的工作原理

路由器與交換機的工作原理 計算機網絡往往由許多種不同類型的網絡互連連接而成。如果幾個計算機網絡只是在物理上連接在一起&#xff0c;它們之間并不能進行通信&#xff0c;那么這種“互連”并沒有什么實際意義。因此通常在談到“互連”時&#xff0c;就已經暗示這些相互連接的…

Java的四種引用,強弱軟虛,用到的場景(轉+補充)

Q1&#xff1a;引用隊列是什么&#xff1f;如何使用&#xff1f;使用的場景有哪些&#xff1f; A1:oracle的api文檔的描述&#xff1a; https://docs.oracle.com/javase/7/docs/api/java/lang/ref/ReferenceQueue.htmlReference queues, to which registered reference objects…

C# lambda表達式與匿名方法

文章目錄匿名方法Lambda表達式實例實例博主寫作不容易&#xff0c;孩子需要您鼓勵 萬水千山總是情 , 先點個贊行不行 C#中的匿名方法是在C#2.0引入的&#xff0c;它終結了聲明委托的唯一方法是使用命名方法的時代。在C#更高版本中&#xff0c;Lambda表達式取代了匿名方法&a…

LINUx打包命令匯總

.tar 解包&#xff1a;tar xvf FileName.tar 打包&#xff1a;tar cvf FileName.tar DirName &#xff08;注&#xff1a;tar是打包&#xff0c;不是壓縮&#xff01;&#xff09; ——————————————— .gz 解壓1&#xff1a;gunzip FileName.gz 解壓2&#xff1a;…

常用的相似度計算

在數據分析和數據挖掘的過程中&#xff0c;我們經常需要知道個體間差異的大小&#xff0c;進而評價個體的相似性和類別。最常見的是數據分析中的相關分析&#xff0c;數據挖掘中的分 類和聚類算法&#xff0c;如K最近鄰&#xff08;KNN&#xff09;和K均值&#xff08;K-Means&…

玩轉C#窗體-屬性、方法和事件詳細說明

文章目錄簡介Windows窗體的基本屬性一、布局屬性1、StartPosition屬性2、Location屬性3、尺寸屬性4、WindowsState屬性5、Autoscroll屬性6、AutoSize屬性二、樣式屬性1、ControlBox屬性2、MaximizeBox屬性3、MinimizeBox屬性4、HelpButton屬性5、ShowIcon屬性6、Icon屬性7、Sho…

for循環和數組練習

//公雞2文&#xff0c;母雞1文&#xff0c;小雞半文&#xff0c;每種至少一只&#xff0c;100文買100只雞有多少種可能var ci 0; for(var g1;g<50;g){for(var m1;m<100;m){for(var x1;x<100;x){if(g*2m*1x*(0.5)100&&gmx100){ci1;console.log("買公雞&qu…

CMD下查看路由表

在cmd下面輸入route print 就可以查看路由表 如何讀懂路由表如何讀懂路由表 源碼:--------------------------------------------------------------------------------Active Routes: Network Destination Netmask Gateway Interface M…

c# automapper 使用

一、最簡單的用法 有兩個類User和UserDto 1 public class User2 {3 public int Id { get; set; }4 public string Name { get; set; }5 public int Age { get; set; }6 }7 8 public class UserDto9 { 10 public string Na…

js正則歸納

/* * 正則的緩存區 * 一、 var numadb1122;var reg/(\d)\1(\d)\2/gi;console.log(num.match(reg));//[ 1122 ]二、普通字符&#xff1a;a b c 1 2 3 特殊字符&#xff1a;\d \w \D //w d 是什么三、元字符中限定符* &#xff1a; 匹配0到多 &#xff1a; 匹配1到…

洛谷 P1469 找筷子

題目描述 經過一段時間的緊張籌備&#xff0c;電腦小組的“RP餐廳”終于開業了&#xff0c;這天&#xff0c;經理LXC接到了一個定餐大單&#xff0c;可把大家樂壞了&#xff01;員工們齊心協力按要求準備好了套餐正準備派送時&#xff0c;突然碰到一個棘手的問題&#xff0c;筷…

玩轉C#控件-常用控件屬性

文章目錄概述Control類的基本屬性1、Name屬性2、Text屬性3、Anchor屬性4、Dock屬性Control類的方法和事件博主寫作不容易&#xff0c;孩子需要您鼓勵 萬水千山總是情 , 先點個贊行不行 概述 控件是包含在窗體上的對象&#xff0c;是構成用戶界面的基本元素&#xff0c;也是…

LazyT 提供對延遲初始化的支持

延遲初始化 就是在第一次使用的時候在 進行類的初始化 public class Student{public Student(){this.Name "DefaultName";this.Age 0;Console.WriteLine("Student is init...");}public string Name { get; set; }public int Age { get; set; }} public…

264標準中高復雜度的三方面

一、運功估計搜索 二、碼率控制 三、濾波算法 在264中&#xff0c;這三方面占據了絕大部分的計算復雜度。具體原因或是優化的具體步驟有時間補上。

ie瀏覽器不支持多行隱藏顯示省略號

平時在寫頁面過程中&#xff0c;相信大家都遇到過文本顯示多行后用省略號代替的問題&#xff0c;來看看代碼&#xff1a; p{display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp:12;//表示顯示12行之后用省略號代替-webkit-box-orient:vertical…