簡介
騰訊地圖座標拾取器。基於騰訊地圖 API 和 Layui 實現類似於微信小程序 wx.getLocation(Object object) 效果。
下載地址
演示
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>