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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...