首页 > 其他分享 >腾讯地图坐标拾取器(自实现,可回调结果)

腾讯地图坐标拾取器(自实现,可回调结果)

时间:2022-12-08 21:44:39浏览次数:64  
标签:layer addrHelper 拾取 坐标 可选项 腾讯

简介

腾讯地图坐标拾取器。基于腾讯地图 API 和 Layui 实现类似于微信小程序 wx.getLocation(Object object) 效果。

演示

JQ22

GitHub(优先更新!)

示例

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>腾讯地图坐标拾取器</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"
        integrity="sha512-lH7rGfsFWwehkeyJYllBq73IsiR7RH2+wuOVjr06q8NKwHp5xVnkdSvUm8RNt31QCROqtPrjAAd1VuNH0ISxqQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
    <script>
        layui.config({
            base: './'
        }).use(["addrHelper"], function () {
            const addrHelper = layui.addrHelper
            const layer = layui.layer

            // 打开坐标拾取器
            addrHelper.render({
                key: "", //必传,腾讯地图api key 申请方法见:https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic
                lat: 39.984120, //可选项,初始化纬度
                lng: 116.307484, //可选项,初始化经度
                width: "80vw", //可选项,弹窗的宽度 默认80vw
                height: "80vh", //可选项,弹窗的高度 默认80vh
                success: function (res) { //可选项,地址选择成功后回调
                    if (res === null) {
                        layer.msg("请选择地址后再提交", {icon: 2})
                        return
                    }
                    layer.alert(JSON.stringify(res))
                    // addrHelper.close() //关闭坐标拾取器
                }
            })
        })
    </script>
</body>

</html>

标签:layer,addrHelper,拾取,坐标,可选项,腾讯
From: https://www.cnblogs.com/cshaptx4869/p/16967431.html

相关文章