供中國地區使用的js 定位插件
特性:
ps:
由於瀏覽器限制,http 域名的網頁使用h5 定位可能會出現問題,如定位不准、禁止定位等,如果想要定位結果更加精準,最好使用https 域名;
該插件的定位文件存放在第三方cdn 中,若想存放至自己的cdn 上,則可參考setConfig函數使用方法介紹
更新日誌:
yarn add @pikaz/location
npm i -S @pikaz/location import { getLocation } from '@pikaz/location' < script
type =" text/javascript "
src =" https://cdn.jsdelivr.net/npm/@pikaz/location "
> </ script >
或者
< script type =" text/javascript " src =" https://unpkg.com/@pikaz/location " > </ script > const { getLocation } = window . pikazLocation| 方法名 | 方法說明 | 參數/object | 參數說明 | 默認參數值 |
| setConfig | 設置全局配置(不調用則使用默認配置) | timeout: Number/選填 | 所有定位函數默認超時時間,單位毫秒 | 10000 |
| url: String/選填 | 靜態文件cdn地址 | https://cdn.jsdelivr.net/npm/@pikaz/location/lib | ||
| getLocation | 默認定位函數,優先使用html5定位,html5定位失敗,則會自動切換為ip定位 | 對應定位類型的參數同下方的getH5Location方法和getIpLocation方法 | - | - |
| getH5Location | html5定位 | timeout: Number/選填 | 超時時間 | 10000 |
| enableHighAccuracy: Boolean/選填 | 是否開啟設備gps啟用高精度定位(更耗時) | false | ||
| detail: Boolean/選填 | 是否需要地址詳細信息(更耗時) | false | ||
| latitude: Number/選填 | 手動傳入經緯度查詢地址信息,latitude與longitude需同時傳入,不傳則使用設備定位 | - | ||
| longitude: Number/選填 | 可手動傳入經緯度查詢地址信息,latitude與longitude需同時傳入,不傳則使用設備定位 | - | ||
| getIpLocation | ip定位 | timeout: Number/選填 | 超時時間 | 10000 |
| detail: Boolean/選填 | 是否需要地址詳細信息(更耗時) | false | ||
| ip: String/選填 | 可手動傳入ipv4格式的ip地址(如114.114.114.114)查詢地址信息,不傳則使用設備ip定位 | - | ||
| searchAddress | 解析地址文本 | timeout: Number/選填 | 超時時間 | 10000 |
| detail: Boolean/選填 | 是否需要地址詳細信息(更耗時) | false | ||
| address: String/必填 | 地址文本字符串,必須帶有省級或市級的全寫或簡寫,不能只包含區縣名稱,如廣東深圳/深圳南山 | - | ||
| searchCodeAddress | 地區編碼查詢 | timeout: Number/選填 | 超時時間 | 10000 |
| detail: Boolean/選填 | 是否需要地址詳細信息(更耗時) | false | ||
| code: String/必填 | 地區編碼 | - | ||
| searchList | 省市區三級聯動,傳入地區編碼獲取該地區下級地區列表 | code: String/選填 | 地區編碼,若不傳則獲取所有省級地區列表 | - |
| searchCodeDetail | 獲取單個地區編碼的詳細信息,等同於其他方法中的detail數據 | timeout: Number/選填 | 超時時間 | 10000 |
| code: String/必填 | 地區編碼 | - |
注:detail開啟則會在原本基礎定位信息的基礎上返回省市區的詳細信息
說明:設置全局配置(不調用則使用默認配置)
可把該項目的根目錄下的static 文件夾整個上傳至您的oss 上,將static 文件夾的鏈接地址作為url 傳入,如oss 上的static 文件夾可通過https://xxx.com/file/static訪問,則url可傳入https://xxx.com/file,若不設置,則url默認使用https://cdn.jsdelivr.net/npm/@pikaz/location/lib等公共cdn地址(第三方cdn可能不穩定,最好自行上傳定位文件)
import { setConfig } from '@pikaz/location'
setConfig ( {
// 超时时间
timeout : 10000 ,
// 您的oss地址
url : 'https://unpkg.com/@pikaz/location/lib' ,
} ) 說明:默認定位函數,優先使用html5 定位,html5 定位失敗,則會自動切換為ip 定位
import { getLocation } from '@pikaz/location'
getLocation ( )
. then ( ( res ) => {
// 返回数据结构: {
// ...,//返回对应定位类型数据,同下方的getH5Location和getIpLocation返回数据格式
// type:"h5"//定位类型:h5/ip
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) 說明:html5 定位函數,html5 定位推薦使用https 協議,若為http,則html5 定位可能出現定位不准確或無法定位(取決於瀏覽器策略),開啟高精度定位會更加耗時;
import { getH5Location } from '@pikaz/location'
getH5Location ( {
// 开启gps高精度定位
enableHighAccuracy : true ,
} )
. then ( ( res ) => {
// 返回数据结构:{
// address: "广东省深圳市福田区"//完整地址
// city: "深圳市"//市级名称
// code: "440304"//地区编码
// district: "福田区"//区县级名称
// latitude: 22.547//区县级纬度
// longitude: 114.085947//区县级经度
// province: "广东省"//省级名称
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) 說明:ip 定位函數,ip 定位相比html5 定位精度更差且可能不准,但是若用戶拒絕定位授權時,則可以使用ip 定位作為兜底方案;
import { getIpLocation } from '@pikaz/location'
getIpLocation ( )
. then ( ( res ) => {
// 返回数据结构:{
// address: "江苏省南京市"//完整地址
// city: "南京市"//市级名称
// code: "320100"//地区编码
// district: ""//区县级名称
// province: "江苏省"//省级名称
// ip: "114.114.114.114"//ip地址
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) 說明:解析地址文本,必須帶有省級或市級的全寫或簡寫,不能只包含區縣名稱,如廣東深圳/廣東省深圳市/廣東南山/深圳/深圳南山
import { searchAddress } from '@pikaz/location'
searchAddress ( {
address : '广东福田' ,
} )
. then ( ( res ) => {
// 返回数据结构:{
// address: "广东省深圳市福田区"//完整地址
// city: "深圳市"//市级名称
// code: "440304"//地区编码
// district: "福田区"//区县级名称
// province: "广东省"//省级名称
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) 說明:地區編碼查詢地址信息
import { searchCodeAddress } from '@pikaz/location'
searchCodeAddress ( {
code : '440304' ,
} )
. then ( ( res ) => {
// 返回数据结构:{
// address: "广东省深圳市福田区"//完整地址
// city: "深圳市"//市级名称
// code: "440304"//地区编码
// district: "福田区"//区县级名称
// province: "广东省"//省级名称
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) 說明:省市區三級聯動,傳入對應行政單位編碼,獲取下級行政單位列表;不傳行政單位編碼默認獲取省級單位列表
import { searchList } from '@pikaz/location'
searchList ( {
code : '110000' ,
} )
. then ( ( res ) => {
// 返回数据结构: [
// {
// "code":"110101",//该地区编码
// "name":"东城区",//该地区名称
// },
// {
// "code":"110102",//该地区编码
// "name":"西城区",//该地区名称
// }
// ]
} )
. catch ( ( err ) => {
console . log ( err )
} ) 說明:獲取單個地區的詳細信息:地區編碼、經緯度、名稱、名稱拼音
import { searchCodeDetail } from '@pikaz/location'
searchCodeDetail ( {
code : '440304' ,
} )
. then ( ( res ) => {
// {
// "code": "440304", //该地区编码
// "location": { //该地区经纬度
// "latitude": 22.521541,
// "longitude": 114.05498
// },
// "name": "福田区", //该地区名称
// "pinyin": "futianqu" //该地区拼音
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) 說明:若開啟則會在原本的返回數據中額外返回詳細的地址信息
import { getH5Location } from '@pikaz/location'
getH5Location ( {
// 获取详细地址信息
detail : true ,
} )
. then ( ( res ) => {
// {
// address: "广东省深圳市福田区" //完整地址
// city: "深圳市" //市级名称
// code: "440304" //地区编码
// district: "福田区" //区县级名称
// latitude: 22.547 //区县级纬度
// longitude: 114.085947 //区县级经度
// province: "广东省" //省级名称
// "detail": { //详细地址信息
// "province": {
// "code": "440000", //省级地区编码
// "location": { //省级地区经纬度
// "latitude": 23.13171,
// "longitude": 113.26627
// },
// "name": "广东省", //省级名称
// "pinyin": "guangdong" //省级名称拼音
// },
// "city": {
// "code": "440300", //市级地区编码
// "location": { //市级地区经纬度
// "latitude": 22.54286,
// "longitude": 114.05956
// },
// "name": "深圳市", //市级名称
// "pinyin": "shenzhen" //市级名称拼音
// },
// "district": {
// "code": "440304", //区县级地区编码
// "location": { //区县级地区经纬度
// "latitude": 22.521541,
// "longitude": 114.05498
// },
// "name": "福田区", //区县级名称
// "pinyin": "futianqu" //区县级名称拼音
// }
// }
} )
. catch ( ( err ) => {
console . log ( err )
} )