example/index.html

<!--
 * @Description: 这是***页面（组件）
 * @Date: 2022-01-03 20:41:58
 * @Author: zouzheng
 * @LastEditors: zouzheng
 * @LastEditTime: 2023-12-01 02:41:18
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>pikaz-location-demo</title>
        <!-- <script src="https://unpkg.com/@pikaz/location"></script> -->
        <script src="../lib/pikazLocation.js"></script>
    </head>

    <body>
        <div id="app">
            运行结果（因国内加载速度较慢，如果第一次定位超时，可刷新页面再尝试）:
        </div>
        <div id="loading">加载中</div>
        <script>
            const show = (name, content, close = true) => {
                const p = document.createElement('p')
                const app = document.getElementById('app')
                app.appendChild(p)
                p.innerHTML = name + ':' + JSON.stringify(content)
                const loading = document.getElementById('loading')
                if (loading && close) {
                    loading.parentNode.removeChild(loading)
                }
            }

            const {
                setConfig,
                getLocation,
                getH5Location,
                getIpLocation,
                searchList,
                searchCodeAddress,
                searchAddress,
                searchCodeDetail,
            } = window.pikazLocation

            // 设置全局配置示例，不调用则采用默认配置
            setConfig({
                // 设置定位文件的cdn地址，具体可以查看文档setConfig配置
                // url: "https://unpkg.com/@pikaz/location/lib",
                timeout: 10000,
            })

            // 默认定位
            getLocation()
                .then((res) => {
                    console.log({ getLocation: res })
                })
                .catch((err) => {
                    console.log({ getLocation: err.message })
                })

            // h5定位
            getH5Location()
                .then((res) => {
                    console.log({ getH5Location: res })
                    show('html5定位(推荐使用手机打开定位到该页面体验)', res)
                })
                .catch((err) => {
                    console.log({ getH5Location: err })
                    show(
                        'html5定位(推荐使用手机打开定位到该页面体验)',
                        err.message,
                        false
                    )
                })

            // 经纬度地址查询
            getH5Location({
                latitude: 22.547,
                longitude: 114.085947,
            }).then((res) => {
                console.log({ getLatLocation: res })
                show('查询经纬度（114.085947，22.547）', res)
            })

            // ip定位
            getIpLocation()
                .then((res) => {
                    console.log({ getIpLocation: res })
                    show('ip定位', res)
                })
                .catch((err) => {
                    console.log({ getIpLocation: err })
                    show('ip定位', err.message)
                })

            // ip查询
            getIpLocation({ ip: '114.114.114.114' })
                .then((res) => {
                    console.log({ getIpAddress: res })
                    show('查询ip（114.114.114.114）', res)
                })
                .catch((err) => {
                    console.log({ getIpAddress: err })
                    show('查询ip（114.114.114.114）', err.message)
                })

            // 省市区三级联动
            searchList().then((provinceList) => {
                // 省列表
                console.log({ provinceList })
                const { code: province } = provinceList[0]
                searchList({ code: province }).then((cityList) => {
                    // 市列表
                    console.log({ cityList })
                    const { code: city } = cityList[0]
                    searchList({ code: city }).then((districtList) => {
                        // 区县列表
                        console.log({ districtList })
                    })
                })
            })

            //   地区编码查询
            searchCodeAddress({ code: '440305' }).then((res) => {
                console.log({ searchCodeAddress: res })
                show('查询地区编码（440305）', res)
            })

            //   文本地址解析
            searchAddress({ address: '深圳南山' }).then((res) => {
                console.log({ searchAddress: res })
                show('解析地址文本（深圳南山）', res)
            })

            //   单个地区的详细信息
            searchCodeDetail({ code: '440305' }).then((res) => {
                console.log({ searchCodeDetail: res })
            })
        </script>
    </body>
</html>