pikaz location
1.0.8
JS positioning plugin for use in China
characteristic:
ps:
Due to browser restrictions, there may be problems with the use of h5 positioning of the web page of the http domain name, such as inaccurate positioning, prohibited positioning, etc. If you want the positioning result to be more accurate, it is best to use the https domain name;
The location file of this plug-in is stored in a third-party CDN. If you want to store it on your own CDN, you can refer to the introduction to the use of the setConfig function
Update log:
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| Method name | Method Description | Parameters/object | Parameter description | Default parameter value |
| setConfig | Set global configuration (use default configuration if not called) | timeout: Number/Optional | Default timeout for all positioning functions, in milliseconds | 10000 |
| url: String/optional | Static file cdn address | https://cdn.jsdelivr.net/npm/@pikaz/location/lib | ||
| getLocation | The default positioning function is preferred to use html5 positioning. If the html5 positioning fails, it will automatically switch to IP positioning. | The parameters corresponding to the positioning type are the same as the getH5Location method and getIpLocation method below | - | - |
| getH5Location | html5 positioning | timeout: Number/Optional | Timeout | 10000 |
| enableHighAccuracy: Boolean/Optional | Whether to enable high-precision positioning with GPS (more time-consuming) | false | ||
| detail: Boolean/optional | Whether address details are required (more time-consuming) | false | ||
| latitude: Number/Optional | Manually pass in latitude and longitude inquiry address information. Latitude and longitude need to be passed in at the same time. If not, use device location | - | ||
| longitude: Number/Optional | You can manually pass in latitude and longitude inquiry address information. Latitude and longitude need to be transmitted at the same time. If you do not pass, you can use the device positioning. | - | ||
| getIpLocation | IP positioning | timeout: Number/Optional | Timeout | 10000 |
| detail: Boolean/optional | Whether address details are required (more time-consuming) | false | ||
| ip: String/optional | You can manually pass in the IP address in IPv4 format (such as 114.114.114.114) to query the address information. If you do not pass it, you can use the device IP location. | - | ||
| searchAddress | Resolve address text | timeout: Number/Optional | Timeout | 10000 |
| detail: Boolean/optional | Whether address details are required (more time-consuming) | false | ||
| address: String/required | The address text string must have full or abbreviation at the provincial or municipal level, and cannot only contain district and county names, such as Shenzhen, Guangdong/Shenzhen Nanshan | - | ||
| searchCodeAddress | Regional code query | timeout: Number/Optional | Timeout | 10000 |
| detail: Boolean/optional | Whether address details are required (more time-consuming) | false | ||
| code: String/required | Regional code | - | ||
| searchList | The three-level linkage between provinces, cities and districts is carried out to obtain the list of lower-level regions in the region | code: String/optional | Regional code, if not transmitted, get a list of all provincial regions | - |
| searchCodeDetail | Get detailed information about a single region encoding, equivalent to detail data in other methods | timeout: Number/Optional | Timeout | 10000 |
| code: String/required | Regional code | - |
Note: If the details are enabled, the detailed information of the province, city and district will be returned based on the original basic positioning information.
Description: Set global configuration (use default configuration if not called)
You can upload the entire static folder in the root directory of the project to your oss and pass the link address of the static folder as a url. For example, the static folder on the oss can be accessed through https://xxx.com/file/static, and the url can be passed to https://xxx.com/file. If not set, the url uses public cdn addresses such as https://cdn.jsdelivr.net/npm/@pikaz/location/lib by default (third-party cdn may be unstable, it is best to upload the location file yourself)
import { setConfig } from '@pikaz/location'
setConfig ( {
// 超时时间
timeout : 10000 ,
// 您的oss地址
url : 'https://unpkg.com/@pikaz/location/lib' ,
} ) Note: The default positioning function is preferred to use html5 positioning. If html5 positioning fails, it will automatically switch to IP positioning.
import { getLocation } from '@pikaz/location'
getLocation ( )
. then ( ( res ) => {
// 返回数据结构: {
// ...,//返回对应定位类型数据，同下方的getH5Location和getIpLocation返回数据格式
// type:"h5"//定位类型：h5/ip
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) Note: html5 positioning function. It is recommended to use the https protocol for html5 positioning. If it is http, then html5 positioning may cause inaccurate positioning or inability to position (depending on the browser policy), and enabling high-precision positioning will be more time-consuming;
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 )
} ) Note: IP positioning function. IP positioning is less accurate and may be inaccurate than HTML5. However, if the user refuses to position authorization, IP positioning can be used as a guarantee solution;
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 )
} ) Note: The text of the resolution address must contain the full or abbreviation of the provincial or municipal level, and cannot only include the names of districts and counties, such as Shenzhen, Guangdong Province, Shenzhen City, Guangdong Province, Nanshan, Guangdong/Shenzhen/Shenzhen/Shenzhen Nanshan
import { searchAddress } from '@pikaz/location'
searchAddress ( {
address : '广东福田' ,
} )
. then ( ( res ) => {
// 返回数据结构:{
// address: "广东省深圳市福田区"//完整地址
// city: "深圳市"//市级名称
// code: "440304"//地区编码
// district: "福田区"//区县级名称
// province: "广东省"//省级名称
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) Description: Regional code query address information
import { searchCodeAddress } from '@pikaz/location'
searchCodeAddress ( {
code : '440304' ,
} )
. then ( ( res ) => {
// 返回数据结构:{
// address: "广东省深圳市福田区"//完整地址
// city: "深圳市"//市级名称
// code: "440304"//地区编码
// district: "福田区"//区县级名称
// province: "广东省"//省级名称
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) Note: The provincial, municipal and district linkages at three levels, transmit the corresponding administrative unit code to obtain the list of lower-level administrative units; if the administrative unit code is not transmitted, obtain the list of provincial units by default
import { searchList } from '@pikaz/location'
searchList ( {
code : '110000' ,
} )
. then ( ( res ) => {
// 返回数据结构: [
// {
// "code":"110101",//该地区编码
// "name":"东城区",//该地区名称
// },
// {
// "code":"110102",//该地区编码
// "name":"西城区",//该地区名称
// }
// ]
} )
. catch ( ( err ) => {
console . log ( err )
} ) Description: Get detailed information about a single region: region code, latitude and longitude, name, name pinyin
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 )
} ) Note: If enabled, the detailed address information will be returned in the original return data.
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 )
} )
