腾讯地图坐标拾取器(原创)
<!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>
<!-- <link rel="stylesheet" href="./addrHelper.css">-->
<!-- <script src="./data/geometries.js"></script>-->
</head>
<body>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.6.8/layui.js" type="application/javascript"></script>
</script>
<script>
layui.config({
base: './'
}).use(["addrHelper"], function () {
const addrHelper = layui.addrHelper
const layer = layui.layer
// console.log(addrHelper)
// 打开坐标拾取器
addrHelper.render({
key: "3GVBZ-IJVLO-6DAW7-STB46-CD7C5-H5BOE", //必传，腾讯地图api key 申请方法见：https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic
lat: 30.03033, //可选项，初始化纬度
lng: 120.5802, //可选项，初始化经度
width: "80vw", //可选项，弹窗的宽度 默认80vw
height: "80vh", //可选项，弹窗的高度 默认80vh
cssDebug: false, //可选项，主要为开发时调试样式
created: function () { //可选项，地图被创建后回调
// 绘制不可编辑的多边形
// this.drawMultiPolygon(
// {
// red: {
// color: "rgba(208, 80, 80, 0.16)",
// borderColor: "rgba(208, 80, 80, 1)",
// },
// blue: {
// color: "rgba(55, 119, 255, 0.16)",
// borderColor: "rgba(55, 119, 255, 1)",
// }
// },
// redGeometries
// )
// 绘制可编辑的多边形
// this.drawMultiPolygon(
// {
// green: {
// color: "rgba(64, 160, 128, 0.16)",
// borderColor: "rgba(64, 160, 128, 1)",
// },
// },
// greenGeometries,
// true
// )
},
success: function (res) { //可选项，确认后回调
//addressInfo 选中的地址, geometryPaths 选中的区域坐标
console.log(res)
if (res.addressInfo === null) {
layer.msg("请选择地址后再提交", {icon: 2})
return
}
// if (res.geometryPaths) {
// console.log(this.isPointInPolygon(res.addressInfo, res.geometryPaths) ? '点在所选范围内' : '点在所选范围外')
// console.log(this.isPolygonIntersect(res.geometryPaths, res.geometryPaths) ? '区域之间有重叠' : '区域之间无重叠')
// }
layer.alert(JSON.stringify(res))
// this.close() //关闭坐标拾取器
}
})
})
</script>
</body>
</html>
页:
[1]