js开源定位插件(完全免费)

1,985 阅读7分钟

插件背景

-----我是分隔线-----

该插件已升级,请移步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示例

移动端运行结果如下

image.png

—— 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吧,谢谢!