Complemento de posicionamiento de JS para su uso en China
característica:
PD:
Debido a las restricciones del navegador, puede haber problemas con el uso del posicionamiento H5 de la página web del nombre de dominio HTTP, como posicionamiento inexacto, posicionamiento prohibido, etc. Si desea que el resultado de posicionamiento sea más preciso, es mejor usar el nombre de dominio HTTPS;
El archivo de ubicación de este complemento se almacena en un CDN de terceros. Si desea almacenarlo en su propio CDN, puede consultar la introducción al uso de la función setconfig
Registro de actualización:
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| Nombre del método | Descripción del método | Parámetros/objeto | Descripción del parámetro | Valor de parámetro predeterminado |
| setconfig | Establezca la configuración global (use la configuración predeterminada si no se llama) | Tiempo de espera: número/opcional | Tiempo de espera predeterminado para todas las funciones de posicionamiento, en milisegundos | 10000 |
| URL: cadena/opcional | Dirección de archivo estático CDN | https://cdn.jsdelivr.net/npm/@pikaz/location/lib | ||
| getLocation | Se prefiere la función de posicionamiento predeterminada para usar el posicionamiento HTML5. Si el posicionamiento HTML5 falla, cambiará automáticamente al posicionamiento IP. | Los parámetros correspondientes al tipo de posicionamiento son los mismos que el método geth5location y el método getiplocation a continuación | - | - |
| geth5location | Posicionamiento HTML5 | Tiempo de espera: número/opcional | Se acabó el tiempo | 10000 |
| EnableHighCuracy: Boolean/Opcional | Si habilita el posicionamiento de alta precisión con GPS (más tiempo que consumen)) | FALSO | ||
| Detalle: booleano/opcional | Se requieren detalles de la dirección (más tiempo) | FALSO | ||
| Latitud: número/opcional | Pase manualmente en la información de la dirección de consulta de latitud y longitud. La latitud y la longitud deben pasar al mismo tiempo. Si no, use la ubicación del dispositivo | - | ||
| Longitud: número/opcional | Puede pasar manualmente en la información de la dirección de consulta de latitud y longitud. La latitud y la longitud deben transmitirse al mismo tiempo. Si no pasa, puede usar el posicionamiento del dispositivo. | - | ||
| getiplocation | Posicionamiento de IP | Tiempo de espera: número/opcional | Se acabó el tiempo | 10000 |
| Detalle: booleano/opcional | Se requieren detalles de la dirección (más tiempo) | FALSO | ||
| IP: String/Opcional | Puede pasar manualmente en la dirección IP en formato IPv4 (como 114.114.114.114) para consultar la información de la dirección. Si no lo pasa, puede usar la ubicación de IP del dispositivo. | - | ||
| búsqueda | Resolver el texto de la dirección | Tiempo de espera: número/opcional | Se acabó el tiempo | 10000 |
| Detalle: booleano/opcional | Se requieren detalles de la dirección (más tiempo) | FALSO | ||
| Dirección: cadena/requerido | La cadena de texto de la dirección debe tener la abreviatura completa o completa a nivel provincial o municipal, y no solo puede contener nombres de distrito y condado, como Shenzhen, Guangdong/Shenzhen Nanshan | - | ||
| SearchCodeaddress | Consulta de código regional | Tiempo de espera: número/opcional | Se acabó el tiempo | 10000 |
| Detalle: booleano/opcional | Se requieren detalles de la dirección (más tiempo) | FALSO | ||
| Código: cadena/requerido | Código regional | - | ||
| lista de búsqueda | El vínculo de tres niveles entre provincias, ciudades y distritos se lleva a cabo para obtener la lista de regiones de nivel inferior en la región | Código: String/Opcional | El código regional, si no se transmite, obtenga una lista de todas las regiones provinciales | - |
| SearchCodetetail | Obtenga información detallada sobre una sola región que codifica, equivalente a los datos detallados en otros métodos | Tiempo de espera: número/opcional | Se acabó el tiempo | 10000 |
| Código: cadena/requerido | Código regional | - |
Nota: Si los detalles están habilitados, la información detallada de la provincia, la ciudad y el distrito se devolverán en función de la información de posicionamiento básica original.
Descripción: Establezca la configuración global (use la configuración predeterminada si no se llama)
Puede cargar toda la carpeta estática en el directorio raíz del proyecto a su OSS y pasar la dirección de enlace de la carpeta estática como URL. Por ejemplo, se puede acceder a la carpeta estática en el OSS a través de https://xxx.com/file/static, y la URL se puede pasar a https://xxx.com/file. Si no se establece, la URL utiliza direcciones CDN públicas como https://cdn.jsdelivr.net/npm/@pikaz/location/lib de forma predeterminada (el CDN de terceros puede ser inestable, es mejor cargar el archivo de ubicación usted mismo)
import { setConfig } from '@pikaz/location'
setConfig ( {
// 超时时间
timeout : 10000 ,
// 您的oss地址
url : 'https://unpkg.com/@pikaz/location/lib' ,
} ) Nota: Se prefiere la función de posicionamiento predeterminada para usar el posicionamiento HTML5. Si el posicionamiento HTML5 falla, cambiará automáticamente al posicionamiento de IP.
import { getLocation } from '@pikaz/location'
getLocation ( )
. then ( ( res ) => {
// 返回数据结构: {
// ...,//返回对应定位类型数据,同下方的getH5Location和getIpLocation返回数据格式
// type:"h5"//定位类型:h5/ip
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) Nota: Función de posicionamiento HTML5. Se recomienda utilizar el protocolo HTTPS para el posicionamiento HTML5. Si es HTTP, entonces el posicionamiento HTML5 puede causar posicionamiento inexacto o incapacidad para posicionarse (dependiendo de la política del navegador), y habilitar el posicionamiento de alta precisión será más lento;
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 )
} ) Nota: función de posicionamiento de IP. El posicionamiento de IP es menos preciso y puede ser inexacto que HTML5. Sin embargo, si el usuario se niega a la autorización de posición, el posicionamiento de IP puede usarse como una solución de garantía;
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 )
} ) Nota: El texto de la dirección de resolución debe contener la abreviatura completa o la abreviatura del nivel provincial o municipal, y no solo puede incluir los nombres de distritos y condados, como Shenzhen, Provincia de Guangdong, Ciudad de Shenzhen, Provincia de Guangdong, Nanshan, Guangdong/Shenzhen/Shenzhen/Shenzhen Nanshanhanhanhanhanhanhanhanhanhanhanhanhanhanhanhanhanhanhanhanhanzanhanzan
import { searchAddress } from '@pikaz/location'
searchAddress ( {
address : '广东福田' ,
} )
. then ( ( res ) => {
// 返回数据结构:{
// address: "广东省深圳市福田区"//完整地址
// city: "深圳市"//市级名称
// code: "440304"//地区编码
// district: "福田区"//区县级名称
// province: "广东省"//省级名称
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) Descripción: Información de la dirección de consulta de código regional
import { searchCodeAddress } from '@pikaz/location'
searchCodeAddress ( {
code : '440304' ,
} )
. then ( ( res ) => {
// 返回数据结构:{
// address: "广东省深圳市福田区"//完整地址
// city: "深圳市"//市级名称
// code: "440304"//地区编码
// district: "福田区"//区县级名称
// province: "广东省"//省级名称
// }
} )
. catch ( ( err ) => {
console . log ( err )
} ) Nota: Los enlaces provinciales, municipales y del distrito en tres niveles, transmiten el código de la unidad administrativa correspondiente para obtener la lista de unidades administrativas de nivel inferior; Si el código de la unidad administrativa no se transmite, obtenga la lista de unidades provinciales de forma predeterminada
import { searchList } from '@pikaz/location'
searchList ( {
code : '110000' ,
} )
. then ( ( res ) => {
// 返回数据结构: [
// {
// "code":"110101",//该地区编码
// "name":"东城区",//该地区名称
// },
// {
// "code":"110102",//该地区编码
// "name":"西城区",//该地区名称
// }
// ]
} )
. catch ( ( err ) => {
console . log ( err )
} ) Descripción: Obtenga información detallada sobre una sola región: Código de región, latitud y longitud, nombre, nombre 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 )
} ) Nota: Si está habilitado, la información de dirección detallada se devolverá en los datos de retorno originales.
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 )
} )