h5常用定位功能封裝

来源:https://www.cnblogs.com/maxiansheng/archive/2022/07/20/16474908.html
-Advertisement-
Play Games

之前很多項目使用地圖時技術選型不一樣;一會兒使用騰訊地圖、一會兒使用高德地圖,一會兒使用百度地圖;每次使用都去查相關api封裝請求很麻煩,於是自己簡單封裝了一下; 插件介紹:基於h5瀏覽器gps定位、百度地圖、高德地圖、騰訊地圖api封裝的獲取位置信息相關插件,支持高精度定位;選擇使用哪個地圖傳入對 ...


之前很多項目使用地圖時技術選型不一樣;一會兒使用騰訊地圖一會兒使用高德地圖一會兒使用百度地圖;每次使用都去查相關api封裝請求很麻煩,於是自己簡單封裝了一下;

插件介紹:基於h5瀏覽器gps定位、百度地圖、高德地圖、騰訊地圖api封裝的獲取位置信息相關插件,支持高精度定位;選擇使用哪個地圖傳入對應的地圖key即可,主要功能有根據ip定位(適用於定位到城市級別)、獲取當前位置經緯度(gps、百度、高德、騰訊)、坐標轉換、逆地址編碼(根據經緯度獲取具體位置信息);想實現獲取具體高精度位置信息,可先獲取高精度的gps坐標,使用逆地址編碼方法將坐標轉換為對應的位置信息;插件內已使用jsonp解決了請求第三方api介面跨域的問題,無需單獨再去配置代理;

 

插件倉庫地址:https://gitee.com/ml_plugins/location.git

 

主要功能:

方法 方法描述 入參 必須 入參類型【描述】 備註
getLocationByIp 通過ip獲取位置信息 params.type 否     string【可選B/A/T;B 百度地圖、A 高德地圖、T 騰訊地圖(預設)】 入參不傳ip會預設根據發來請求的IP進行定位;
測試發現騰訊地圖提供的ip定位api最好用,基
本都能定位到區,高德偏差最大,測試時我在
成都被定位到了雅安;註意,若獲取失敗,檢
查對應地圖的Referer白名單是否配置,在地
圖密匙管理處配置
params.key string【type對應的地圖密匙,不傳時需在插件文件里配置對應的MAP_KEY】
params.ip string【需要定位的ip地址,不傳ip會預設根據發來請求的IP進行定位】
getCurrentLngLat     獲取當前位置經緯度     params.type 否  string【可選B/A/T/GPS; B 百度坐標、A 高德坐標、T 騰訊坐標、 GPS 坐標(預設)】  
params.key string【type對應的地圖密匙,不傳時需在插件文件里配置對應的MAP_KEY】   
params.enableHighAccuracy 否  boolean 【是否開啟高精度定位(預設true)】  
params.timeout number 【GPS定位失敗超時時間(預設5000)】  
params.maximumAge number 【最長有效期,在重覆獲取地理位置時,此參數指定多久再次獲取位置(預設5000)】  
translateCoordinate    GPS坐標轉百度、高德、騰訊坐標    longitude string | number【GPS經度】  
latitude string | number【GPS經度】   
type string【可選B/A/T; B 百度地圖、A 高德地圖、T 騰訊地圖(預設)】  
key 否  string【type對應的地圖密匙,不傳時需在插件文件里配置對應的MAP_KEY】  
inverseGeocoding 逆地址編碼(根據經緯度獲取位置信息) params.longitude string | number 【坐標經度】  
params.latitude string | number 【坐標緯度】  
params.type string 【可選B/A/T/GPS;  B 百度坐標、A 高德坐標、T 騰訊坐標、 GPS 坐標(預設)】  
key 否  對應地圖key密匙  
otherCoordTransfromToBaidu
 
其它坐標轉百度地圖坐標   options.locations string 【需轉換的源坐標,多組坐標以“;”分隔(經度,緯度) 示例:29.575429778924,114.21892734521】  
options.type number 【源坐標類型:1:GPS; 2:搜狗; 3:火星坐標; 4:墨卡托平面坐標; 5:百度地圖採用的經緯度坐標(bd09ll); 6:百度地圖採用的墨卡托平面坐標(bd09mc); 7:圖吧地圖坐標; 8:51地圖坐標;】  
options.key string 【百度地圖ak密匙;不傳時需在插件文件里配置對應的MAP_KEY】  
otherCoordTransfromToGaode 其它坐標轉高德地圖坐標 options.locations string 【經度和緯度用","分割,經度在前,緯度在後,經緯度小數點後不得超過6位。多個坐標對之間用”|”進行分隔最多支持40對坐標。】  
options.type number 【源坐標類型:1:GPS 2:mapbar 3:baidu 4:autonavi;】  
options.key string 【高德地圖key密匙;不傳時需在插件文件里配置對應的MAP_KEY】  
otherCoordTransfromToTencenter    其它坐標轉騰訊地圖坐標    options.locations string 【經度和緯度用","分割,經度在前,緯度在後,多組的話每組坐標之間使用”;"分隔;最多支持40對坐標。】  
options.type number 【源坐標類型:1、GPS坐標 2、sogou經緯度 3、baidu經緯度 4、mapbar經緯度 5、[預設]騰訊、google、高德坐標 6、sogou墨卡托】  
options.key string【騰訊地圖key密匙 ;不傳時需在插件文件里配置對應的MAP_KEY】  
           

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 03 | 事務隔離:為什麼你改了我還看不見? 事務 Transaction TRX 事務就是要保證一組資料庫操作,要麼全部成功,要麼全部失敗。 MySQL 原生的 MyISAM 引擎不支持事務 隔離性與隔離級別 SQL 標準的事務隔離級別包括:讀未提交(read uncommitted)、讀提交(r ...
  • 人臉識別目前已廣泛應用於手機解鎖、刷臉支付、閘機身份驗證等生活場景,然而,人臉識別能力雖帶來了極大的便利,卻無法鑒別人臉是否真實,比如使用高模擬圖片、精密石膏或3D建模面具,即可輕鬆攻破人臉識別演算法,單獨使用該能力存在極大的安全隱患。 華為機器學習服務的動作活體檢測能力,通過採用指令動作配合的方式進 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、什麼是WebSocket WebSocket 是一種在單個TCP連接上進行全雙工通信的協議。WebSocket 使得客戶端和伺服器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。 在 WebSocket API 中,瀏覽器 ...
  • 主要講解運用Webpack 5 中集成 ESLint 的方法與步驟 ...
  • const person = { name: 'Lydia' } Object.defineProperty(person, 'age', { value: 21, }) console.log(person) console.log(Object.keys(person)) 輸出結果 原因: de ...
  • 1. 前言 最近在處理前端直播的業務,根據業務需要,使用 flv.js 的方案播放實時的flv視頻流。不得不承認,flv.js 是一個偉大的庫。 在使用flv.js開發的過程中,遇到了一些問題,也無外乎是視頻延遲,視頻卡頓等問題,經過在github issues里摸爬滾打,加上長時間的試錯,將這些問 ...
  • 介紹: 有時候請求某些第三方api用nginx做反向代理解決跨域不能滿足需求,例如請求百度或者騰訊地圖的ip定位介面,該介面會根據請求來源的ip返回該ip地址對應的位置信息,但是若是用ng做了代理或者是後端做介面轉發的話實際獲取到的ip位置信息是伺服器的ip地址,想要直接解析客戶端的ip位置信息就必 ...
  • # 切換到要覆蓋的分支,這裡我們用develop分支git checkout develop# 執行覆蓋的命令,這裡是將master分支的內容覆蓋到develop分支git reset --hard origin/master# 覆蓋成功之後,將本地分支強行推到遠程分支git push -f 本人試 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...