插件背景
-----我是分隔线-----
该插件已升级,请移步npm查看最新插件文档
相信很多人最近都收到某度等地图应用商发来的通知,因为政策等原因,地图应用的使用需要商业授权,而我司之前使用的某度地图商业授权一年要五万!然而绝大部分公司使用的功能仅仅只是浏览器定位,省市区三级联动查询等简单的功能,这样的价格对公司来说虽说不高,但是能省当然是最好的,于是这款个人开源的浏览器定位插件就诞生了(已服务于本人公司业务)。
ps:其他地图应用是否会进行收费暂时不知,不过本项目不需要申请与维护地图应用key,也没有调用次数限制与并发限制,当然也可以收藏下本项目当做备用方案以备不时之需。毕竟免费,胜过所有,嘿嘿。
插件地址
npm地址:www.npmjs.com/package/@pi…
github地址:github.com/pikaz-18/pi…
介绍
供中国地区使用的js定位插件
特性:
- 支持浏览器h5定位、ip定位、经纬度查询地址、省市区三级联动列表搜索
- 经纬度查询地址getAddress函数可配合第三方定位使用,如微信定位只能获取经纬度,可使用getAddress方法传入经纬度获取具体地址信息
- 定位信息文件已做压缩处理,如果有启用gzip时定位大约只会花费几十k
ps:
-
由于浏览器限制,http域名的网页使用h5定位可能会出现问题,如定位不准、禁止定位等,如果想要定位结果更加精准,最好使用https域名;
-
该插件的定位文件存放在第三方cdn中,若想存放至自己的cdn上,则可参考setConfig函数使用方法介绍
—— demo示例
移动端运行结果如下
—— demo代码
安装
with npm or yarn
yarn add @pikaz/location
npm i -S @pikaz/location
import {
getLocation
} from "@pikaz/location"
with cdn
<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
方法函数
方法名 | 说明 | 参数 | 默认参数值 |
---|---|---|---|
setConfig | 设置全局默认参数;timeout为所有定位函数超时时间,url为定位文件cdn地址,如:cdn.jsdelivr.net/npm/@pikaz/… | {timeout: Number/选填, url: String/选填} | {timeout:3000, url:"unpkg.com/@pikaz/loca… |
getLocation | 默认定位函数,优先使用html5定位,html5定位失败,则会自动切换为ip定位;timeout为超时时间,enableHighAccuracy为是否开启高精度定位(开启设备gps定位,但所需时间更久) | {timeout: Number/选填, enableHighAccuracy: Boolean/选填} | {timeout:3000, enableHighAccuracy:false} |
getH5Location | 指定使用html5定位函数;timeout为超时时间,enableHighAccuracy为是否开启高精度定位(开启设备gps定位) | {timeout: Number/选填, enableHighAccuracy: Boolean/选填} | {timeout:3000, enableHighAccuracy:false} |
getIpLocation | 指定使用ip定位函数; timeout为超时时间 | {timeout: Number/选填} | {timeout:3000} |
getAddress | 根据经纬度获取具体地址;latitude为纬度,longitude为经度 | { latitude: Number/必填, longitude : Number/必填} | { latitude: 0, longitude : 0} |
searchList | 省市区三级联动,传入地区行政编码返回下级地区列表信息,code为地区编码,不传则为查询省级列表 | code: String/选填 | code:"" |
方法示例
setConfig
说明:设置全局默认参数,可把该项目的根目录下的static文件夹上传至至您的oss或服务器上,将static所在的地址作为url传入,如oss上的static文件夹可通过xxx.com/file/static…
import {
setConfig
} from "@pikaz/location"
setConfig({
timeout: 3000,
url: "https://unpkg.com/@pikaz/location/lib"
})
getLocation
说明:默认定位函数,html5定位推荐使用https协议的域名,若为http,则html5定位可能出现定位不准确,开启高精度定位会更加耗时
import {
getLocation
} from "@pikaz/location"
getLocation({
timeout: 3000,
enableHighAccuracy: true
}).then(res => {
console.log(res)
// 返回值结构: {
// latitude:0//当期定位的纬度,
// longitude:0//当期定位的经度,
// province: ""//当期定位的省级单位名称,
// city: ""//当期定位的市级单位名称,
// district: ""//当期定位的区、县级单位名称,
// code: ""//当前定位的行政编码,
// type: ""//定位类型:h5或ip,
// details: {//当前地址详情
// province: {
// code: "",//当前定位的省级单位行政编码,
// location: {longitude:0,latitude:0},//当前定位的省级单位的经纬度
// name: "",//当前定位的省级单位名称,
// pinyin: ""//当前定位的省级单位名称拼音
// },
// city: {
// code: "",//当前定位的市级单位行政编码,
// location: {longitude:0,latitude:0},//当前定位的市级单位的经纬度
// name: "",//当前定位的市级单位名称,
// pinyin: ""//当前定位的市级单位名称拼音
// },
// district: {
// code: "",//当前定位的区县级单位行政编码,
// location: {longitude:0,latitude:0},//当前定位的区县级单位的经纬度
// name: "",//当前定位的区县级单位名称,
// pinyin: ""//当前定位的区县级单位名称拼音
// },
// }
}).catch(err => {
console.log(err)
})
getH5Location
说明:html5定位函数,html5定位推荐使用https协议的域名,若为http,则html5定位可能出现定位不准确,开启高精度定位会更加耗时;该函数只会返回经纬度,若需具体地址,可配合getAddress函数获取具体地址
import {
getH5Location
} from "@pikaz/location"
getH5Location({
timeout: 3000,
enableHighAccuracy: true
}).then(res => {
console.log(res)
// 返回值结构: {
// latitude:0//当期定位的纬度,
// longitude:0//当期定位的经度,
// }
}).catch(err => {
console.log(err)
})
getIpLocation
说明:ip定位函数,ip定位相比html5定位精准度更差,只精确到市(区县数据不准确,有时候市级定位也不准确,这是ip定位的缺陷),但是若用户拒绝定位授权时,则可以使用ip定位作为兜底方案;该函数只会返回经纬度,若需具体地址,可配合getAddress函数获取具体地址
import {
getIpLocation
} from "@pikaz/location"
getIpLocation({
timeout: 3000
}).then(res => {
console.log(res)
// 返回值结构: {
// latitude:0//当期定位的纬度,
// longitude:0//当期定位的经度,
// }
}).catch(err => {
console.log(err)
})
getAddress
说明:根据经纬度查询具体定位函数
import {
getAddress
} from "@pikaz/location"
getAddress({
latitude: 40.0402718,
longitude: 116.2735831
}).then(res => {
console.log(res)
// 返回值结构: {
// latitude:0//当期定位的纬度,
// longitude:0//当期定位的经度,
// province: ""//当期定位的省级单位名称,
// city: ""//当期定位的市级单位名称,
// district: ""//当期定位的区、县级单位名称,
// code: ""//当前定位的行政编码,
// details: {//当前地址详情
// province: {
// code: "",//当前定位的省级单位行政编码,
// location: {longitude:0,latitude:0},//当前定位的省级单位的经纬度
// name: "",//当前定位的省级单位名称,
// pinyin: ""//当前定位的省级单位名称拼音
// },
// city: {
// code: "",//当前定位的市级单位行政编码,
// location: {longitude:0,latitude:0},//当前定位的市级单位的经纬度
// name: "",//当前定位的市级单位名称,
// pinyin: ""//当前定位的市级单位名称拼音
// },
// district: {
// code: "",//当前定位的区县级单位行政编码,
// location: {longitude:0,latitude:0},//当前定位的区县级单位的经纬度
// name: "",//当前定位的区县级单位名称,
// pinyin: ""//当前定位的区县级单位名称拼音
// },
// }
}).catch(err => {
console.log(err)
})
searchList
说明:省市区三级联动,传入对应行政单位编码,获取下级行政单位列表;不传行政单位编码默认获取省级单位列表
import {
searchList
} from "@pikaz/location"
searchList("110000").then(res => {
console.log(res)
// 返回值结构: [
// {"code":"410100",//该行政单位编码
// "name":"郑州市",//该行政单位名称
// "pinyin":"zhengzhou",//该行政单位名称拼音
// "location":{"latitude":34.74725,"longitude":113.62493}//该行政单位经纬度
// ]
}).catch(err => {
console.log(err)
})
最后
由于项目可能存在着不足,若在使用中出现问题,欢迎前往issue或掘金下方评论区评论(最好在github中提问,因为github有邮件提醒方便本人及时查看并修正问题)
如果觉得对您有帮助的话,欢迎前往github帮我点个star吧,谢谢!