騰訊地圖座標拾取器(自實現,可回調結果)

簡介

騰訊地圖座標拾取器。基於騰訊地圖 API 和 Layui 實現類似於微信小程序 wx.getLocation(Object object) 效果。

下載地址

GitHub
Gitee

演示

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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章