h5頁面如何呼叫百度地圖取得目前位置（程式碼）
這篇文章帶給大家的內容是關於h5頁面如何調用百度地圖獲取當前位置（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
在專案中越來越多的用到了手機的GRS定位功能，使用百度地圖API獲取當前位置並在地圖上標註出來首先應該在官網上註冊key 
點選取得金鑰，註冊取得key。
完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="
</script>
<title>百度地图的定位</title>
</head>
<body>
<p id="allmap" style="width: 100%;height: 500px;"></p>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); var point = new BMap.Point(108.95,34.27);
map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){console.log(r.point)
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);//标出所在地
map.panTo(r.point);//地图中心移动
//alert('您的位置：'+r.point.lng+','+r.point.lat);
var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents; console.log(rs.address);//地址信息
alert(rs.address);//弹出所在地址
});
}else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})</script></body></html> 運行結果是：
#（註：用瀏覽器定位是不準確的，建議用手機測試！）
相關推薦：
HTML5呼叫百度地圖API取得目前位置並直接導航目的地的方法
#以上是h5頁面如何呼叫百度地圖取得目前位置（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
h5是指什麼
Aug 02, 2023 pm 01:52 PM
H5是指HTML5，是HTML的最新版本，H5是一個功能強大的標記語言，為開發者提供了更多的選擇和創造空間，它的出現推動了Web技術的發展，使得網頁的交互和效果更加出色，隨著H5技術的逐漸成熟和普及，相信它將在互聯網的世界中發揮越來越重要的作用。
h5如何使用position
Dec 26, 2023 pm 01:39 PM
在H5中使用position屬性可以透過CSS控制元素的定位方式：1、相對定位relative，語法為「style="position: relative;」；2、絕對定位absolute，語法為「style="position: absolute; 」；3、固定定位fixed，語法為「style="position: fixed;」等等。
H5代碼：可訪問性和語義HTML
Apr 09, 2025 am 12:05 AM
H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構，提高SEO。 2.ARIA屬性如aria-label增強可訪問性，輔助技術用戶可順利使用網頁。
vue3怎麼實作H5表單驗證元件
Jun 03, 2023 pm 02:09 PM
效果圖描述基於vue.js，不依賴其他外掛程式或函式庫實作；基礎功能使用保持和element-ui一致，內部實作做了一些行動裝置差異的調整。目前建置平台使用uni-app官方腳手架構建，因為當下行動端大多情況就h6和微信小程式兩種，所以一套程式碼跑多端十分適合技術選型。實作思路核心api：使用provide和inject，對應和。在元件中，內部用一個變數（陣列）去將所有實例儲存起來，同時把要傳遞的資料透過provide暴露出去；元件則在內部用inject去接收父元件提供過來的數據，最後把自身的屬性和方法提交
H5指的是什麼？探索上下文
Apr 12, 2025 am 12:03 AM
H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
H5與HTML5相同嗎？
Apr 08, 2025 am 12:16 AM
"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。
