【HTML】html使用高德地图设置考勤范围
CrazyPanda发表于：2024-02-07 16:31:50浏览：361次
需求： 系统需要考勤功能，并在WEB端设置考勤范围，用于员工手机端再次范围内打卡签到，WEB端需要设置考勤地点以及考勤范围。 基本思路：绘制地图->根据地址获取坐标->根据坐标绘制圆形范围，点击地图获取坐标->根据坐标绘制圆形范围->根据坐标获取地理位置
1 使用高德地图开发
首先需要再高德开放平台注册账号，并创建应用，获取高德地图key以及安全秘钥
这里需要用到地图定位，一级地理坐标转换，使用高德开放平台JSAPI开发。
HTML引入js，安全秘钥配置一定要写在js上方：
<script>
window._AMapSecurityConfig = {
securityJsCode:'高德安全秘钥',
}
</script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=高德key"></script>2 绘制地图
这里设置#container作为地图容器，一定要设置容器的宽和高，否则地图绘制不出来。
<div class="layui-form-item nowrap" style="margin-left: 40px;">
<div id="container"></div>
</div>
<style>
#container {
width: 100%;
height: 300px;
}
#search {
position: absolute;
right: 0;
top: 0;
width: 18%;
}
</style>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11
});
</script>绘制出的地图如下
（这里确实要称赞一下高德地图，默认地图会有自动定位功能，后来使用过其他地图，必须设置中心点坐标才行，否则就定位到首都去了）
3 根据输入地址获取地址坐标
这里需要用到地理编码功能
设置输入框，并参考官网demo，设置获取坐标值的方法
<div class="layui-form-item nowrap">
<label class="layui-form-label">地址检索</label>
<div class="layui-input-block">
<input name="address" id="addr" value='{$vo.address|default=""}' placeholder="请输入地址" class="layui-input" style="width: 80%;">
<button type="button" data-title="搜索" id="search" class='layui-btn layui-btn-primary'>搜索</button>
</div>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11
});
AMap.plugin('AMap.Geocoder', function() {
var geocoder = new AMap.Geocoder({
city: "0371", //默认城市
});
//根据地址获取坐标
function geoCode() {
var address = document.getElementById('addr').value;
console.log(address);
geocoder.getLocation(address, function(status, result) {
console.log(status);
console.log(result);
if (status === 'complete'&&result.geocodes.length) {
var lnglat = result.geocodes[0].location;
var radius = $('#Radius').val();
document.getElementById('Gps').value = lnglat.lng+','+lnglat.lat;
}else{
layer.msg('请输入有效的地址信息');
}
});
}
//事件绑定
document.getElementById("search").onclick = geoCode;
})
</script>这里尤其要注意点击事件的绑定，在加载组件完成后，给按钮绑定点击事件
document.getElementById("search").onclick = geoCode;这样就能实现页面输入地址，点击搜索按钮，获取地址坐标值。
获取到的坐标值
如果地址描述不清晰，可能会获取到多个相关地址，比如搜索“二七广场”，就会获取到多条结果
4 设置考勤范围
根据已经获取到的坐标，以坐标为中心点，在地图上画出考勤范围，此处我们使用较简单的圆形覆盖物绘制功能，根据设置的半径，来绘制圆形的大小。
页面设置半径输入框，并根据坐标绘制圆形覆盖物
<div class="layui-form-item nowrap">
<label class="layui-form-label">半径(m)</label>
<div class="layui-input-block">
<input name="radius" id="Radius" maxlength="5" value='{$vo.radius|default="200"}' placeholder="请输入半径" class="layui-input">
</div>
</div>
<script>
function addCircle()
{
if ($('#Gps').val())
{
var lnglat = $('#Gps').val().split(',');
var radius = $('#Radius').val();
map.clearMap();
var circle = new AMap.Circle({
center: new AMap.LngLat(lnglat[0],lnglat[1]), // 圆心位置
radius: radius, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35 //填充透明度
});
map.add(circle);
map.setFitView();
}
}
</script>效果如下
修改半径值，重新定位，地图绘自适应缩放到合适位置，赞一个
（此处还是要称赞一下高德地图，定位后可以自动切换中心点，并切换地图显示级别，让画好的覆盖物大小适中的显示在地图中，有些地图定位后都不能自动迁移，让你都不知道定位到哪里了，也不会自适应地图大小，都需要手动设置才行。。。）
5 点击地图定位并绘制圆形范围
有时候以文字地址查询到的地址坐标和自己实际需要的会有偏差，所有做了这个点击地图定位并绘制圆形，方法比较简单，只要有坐标和半径，我们已经可以绘制圆形了，需要的只是点击地图获取坐标值的方法。
参考官网方法
给地图设置点击事件
<script>
//点击地图获取坐标
function showInfoClick(e){
var lng = e.lnglat.getLng();
var lat = e.lnglat.getLat();
// 创建一个 Marker 实例：
var marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
// oldmarker = marker;
// console.log(oldmarker);
if(oldmarker != 1){
// 移除已创建的 marker
map.remove(oldmarker);
}
oldmarker = marker;
// 将创建的点标记添加到已有的地图：
map.add(marker);
document.getElementById('Gps').value = lng+','+lat;
//画圆
addCircle();
//坐标获取地址
regeoCode();
}
map.on('click', showInfoClick);
</script>知道了所点击的地址坐标，绘制圆形覆盖物已经没问题了，我们还需要通过逆地理编码方法，获取这个坐标对应的地址，告诉用户这里是哪里
<script>
//根据坐标获取地址
function regeoCode() {
var lnglat = document.getElementById('Gps').value.split(',');
//需要正确配置地图apikey才可以获取
geocoder.getAddress(lnglat, function(status, result) {
// console.log(status);
// console.log(result);
if (status === 'complete'&&result.regeocode) {
var address = result.regeocode.formattedAddress;
document.getElementById('addr').value = address;
}else{
layer.msg('根据经纬度查询地址失败')
}
});
}
</script>实现效果如下
6 全部代码
<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
<div class="layui-card-body">
<div class="layui-form-item">
<label class="layui-form-label label-required">签到点名称</label>
<div class="layui-input-block">
<input name="name" maxlength="20" value='{$vo.name|default=""}' required placeholder="请输入签到点名称" class="layui-input">
</div>
</div>
<div class="layui-form-item nowrap">
<label class="layui-form-label">半径(m)</label>
<div class="layui-input-block">
<input name="radius" id="Radius" maxlength="5" value='{$vo.radius|default="200"}' placeholder="请输入半径" class="layui-input">
</div>
</div>
<div class="layui-form-item nowrap">
<label class="layui-form-label">地址检索</label>
<div class="layui-input-block">
<input name="address" id="addr" value='{$vo.address|default=""}' placeholder="请输入地址" class="layui-input" style="width: 80%;">
<button type="button" data-title="搜索" id="search" class='layui-btn layui-btn-primary'>搜索</button>
</div>
</div>
<div class="layui-form-item nowrap" style="margin-left: 40px;">
<div id="container"></div>
</div>
</div>
<div class="hr-line-dashed"></div>
{notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
<div class="layui-form-item text-center">
<input type="hidden" id="Gps" name="gps" value="{$vo.gps|default=''}">
<button class="layui-btn" type='submit'>保存数据</button>
<button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
</div>
<script>window.form.render();</script>
</form>
<style>
#container {
width: 100%;
height: 300px;
}
#search {
position: absolute;
right: 0;
top: 0;
width: 18%;
}
</style>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11
});
var oldmarker = 1;
AMap.plugin('AMap.Geocoder', function() {
var geocoder = new AMap.Geocoder({
city: "0371", //默认城市
});
//点击地图获取坐标
function showInfoClick(e){
var lng = e.lnglat.getLng();
var lat = e.lnglat.getLat();
// 创建一个 Marker 实例：
var marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
// oldmarker = marker;
// console.log(oldmarker);
if(oldmarker != 1){
// 移除已创建的 marker
map.remove(oldmarker);
}
oldmarker = marker;
// 将创建的点标记添加到已有的地图：
map.add(marker);
document.getElementById('Gps').value = lng+','+lat;
//画圆
addCircle();
//坐标获取地址
regeoCode();
}
map.on('click', showInfoClick);
//根据坐标获取地址
function regeoCode() {
var lnglat = document.getElementById('Gps').value.split(',');
//需要正确配置地图apikey才可以获取
geocoder.getAddress(lnglat, function(status, result) {
// console.log(status);
// console.log(result);
if (status === 'complete'&&result.regeocode) {
var address = result.regeocode.formattedAddress;
document.getElementById('addr').value = address;
}else{
layer.msg('根据经纬度查询地址失败')
}
});
}
function geoCode() {
var address = document.getElementById('addr').value;
console.log(address);
geocoder.getLocation(address, function(status, result) {
console.log(status);
console.log(result);
if (status === 'complete'&&result.geocodes.length) {
var lnglat = result.geocodes[0].location;
var radius = $('#Radius').val();
document.getElementById('Gps').value = lnglat.lng+','+lnglat.lat;
addCircle();
}else{
layer.msg('请输入有效的地址信息');
}
});
}
//事件绑定
document.getElementById("search").onclick = geoCode;
addCircle();
})
function addCircle()
{
if ($('#Gps').val())
{
var lnglat = $('#Gps').val().split(',');
var radius = $('#Radius').val();
map.clearMap();
var circle = new AMap.Circle({
center: new AMap.LngLat(lnglat[0],lnglat[1]), // 圆心位置
radius: radius, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35 //填充透明度
});
map.add(circle);
map.setFitView();
}
}
</script>已上，就是html使用高德地图设置考勤范围的功能。
由于高德开始收费了，项目要切换新的地图了，在此记录一下，也算是跟对高德做个告别，新地图的使用方式见下篇箩筐地图的使用，设置考勤范围。
猜你喜欢
- 【前端】微信小程序推送订阅消息
- 业务需要，商城类小程序，要在用户下单支付成功后，推送消息通知用户。首先想到的是小程序模板消息，微信公众号模板消息已经用过很多了，小程序模板消息确是第一次做。小程序模板消息 参考https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html 小程序模板消息在2020年已经改版了，现在推送模板消息都会推送到服务通知里面，
- 【前端】全栈软件开发工程师需要具备哪些技能
- 全栈软件开发工程师需要具备前端、后端和数据库等多方面的技能，以便能够在整个应用开发周期中承担各种任务。以下是典型的全栈软件开发工程师的技能栈：一、前端技能：1.HTML/CSS/JavaScript:构建网页的基本技能，负责页面结构、样式和交互。2.前端框架：掌握至少一种前端框架，如 React.js、Vue.js、Angular，用于构建可维护的、高性能的前端应用。3.前端工具：使用构建工具（Webpack、Parcel）、包管理工具（npm、Yarn）、代码规范工具（ESLint、Prett
- 【前端】JavaScript判断数组对象是否含有某个值的方法（6种）
- 【JavaScript基础语法】web前端判断数组对象是否含有某个值的方法（6种）知识回调场景复现实现方式（6种）利用循环遍历数组元素利用some，filter方法利用array.indexOf方法利用array.includes方法利用array.find方法利用set中has方法本期小结知识回调文章内容文章链接vue3 antd table表格的增删改查（一）input输入框根据关键字搜索【后台管理系统纯前端filter过滤】https://blog.csdn.net/XSL_HR/arti
- 【前端】PHP开发者的Vue与React入门指南
- PHP是一种常用的服务器端脚本语言，用于开发动态网页和网站。许多PHP开发者经常需要学习前端框架来提升他们的技能，并且Vue.js和React.js是两个当前非常热门的前端框架。本文将为PHP开发者提供一份Vue.js和React.js的入门指南，带有具体的代码示例，帮助他们快速了解这两个框架的基本概念和用法。1. Vue.js入门指南Vue.js是一款轻量级的JavaScript框架，用于构建交互式的用户界面。下面是一个简单的Vue.js示例，展示了如何创建一个基本的Vue组件并进行数据绑定:
- 【Html】H5跳转支付宝小程序的两种方式
- H5跳转支付宝小程序的两种方式，第一种方式还可以打开支付宝生活号网页，只是换成appid换成网页应用appid，page参数换成url参数，url对应的是自己页面的链接
- 【前端】html Antv L7 + mapbox 实现3D地图 3D中国地图 不限于中国地图
- echarts的3D地图实在太丑了，还一堆bug使用阿里的Antv可视化库L7，实现3D地图，底图是mapbox 参考示例：https://l7.antv.antgroup.com/zh/examples/polygon/3d#floatMap如果不需要底图样式，可把Scene的style设置为blank 直接上代码了，vue的就不说了，项目是html的mapbox依赖<script src='https://api.mapbox.com/mapbox-gl-js/v2.
- 【HTML】箩筐地图的使用，设置考勤范围
- 接上篇【PHP】html使用高德地图设置考勤范围，项目换掉了高德地图，替换成了箩筐地图，继续实现考勤打卡范围设置。需求：系统需要考勤功能，并在WEB端设置考勤范围，用于员工手机端在此范围内打卡签到，WEB端需要设置考勤地点以及考勤范围。 上篇高德地图已经实现了此功能，现在要换成箩筐地图实现此功能 基本思路：绘制地图->根据地址获取坐标->根据坐标绘制圆形范围->根据半径自适应显示圆形范围1 箩筐地图箩筐地图开放平台https://testlbs.luokuang.com/ 同样
- 【前端】快速了解 ES6 新增字符串方法，开箱即用（含案例）
- 文章目录📋前言🎯includes() 方法🎯startsWith() 方法🎯endsWith() 方法🎯repeat() 方法🎯padStart() 方法🎯padEnd() 方法🎯trim() 方法🎯trimStart() 或 trimLeft() 方法🎯trimEnd() 或 trimRight() 方法🎯replaceAll() 方法🎯slice() 方法🎯substring() 方法🎯split() 方法🎯charAt() 方法🎯charCodeAt() 方
栏目分类全部>