js开源定位插件（完全免费） |
您所在的位置：网站首页 › ip地址的定位精度 › js开源定位插件（完全免费） |
js开源定位插件（完全免费）
|
插件背景
-----我是分隔线----- 该插件已升级，请移步npm查看最新插件文档 相信很多人最近都收到某度等地图应用商发来的通知，因为政策等原因，地图应用的使用需要商业授权，而我司之前使用的某度地图商业授权一年要五万！然而绝大部分公司使用的功能仅仅只是浏览器定位，省市区三级联动查询等简单的功能，这样的价格对公司来说虽说不高，但是能省当然是最好的，于是这款个人开源的浏览器定位插件就诞生了（已服务于本人公司业务）。 ps:其他地图应用是否会进行收费暂时不知，不过本项目不需要申请与维护地图应用key，也没有调用次数限制与并发限制，当然也可以收藏下本项目当做备用方案以备不时之需。毕竟免费，胜过所有，嘿嘿。 插件地址npm地址:www.npmjs.com/package/@pi… github地址:github.com/pikaz-18/pi… 介绍供中国地区使用的js定位插件 特性： 支持浏览器h5定位、ip定位、经纬度查询地址、省市区三级联动列表搜索 经纬度查询地址getAddress函数可配合第三方定位使用，如微信定位只能获取经纬度，可使用getAddress方法传入经纬度获取具体地址信息 定位信息文件已做压缩处理，如果有启用gzip时定位大约只会花费几十kps： 由于浏览器限制，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 或者 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吧，谢谢！ |
【本文地址】
今日新闻 |
推荐新闻 |