【HTML】箩筐地图的使用，设置考勤范围
CrazyPanda发表于：2024-02-07 17:47:59浏览：853次
接上篇【PHP】html使用高德地图设置考勤范围，项目换掉了高德地图，替换成了箩筐地图，继续实现考勤打卡范围设置。
需求： 系统需要考勤功能，并在WEB端设置考勤范围，用于员工手机端在此范围内打卡签到，WEB端需要设置考勤地点以及考勤范围。 上篇高德地图已经实现了此功能，现在要换成箩筐地图实现此功能 基本思路：绘制地图->根据地址获取坐标->根据坐标绘制圆形范围->根据半径自适应显示圆形范围
1 箩筐地图
箩筐地图开放平台https://lbs.luokuang.com/
同样的，我们先注册账号，创建应用，设置key值，使用JSAPI来实现我们的功能。
2 绘制地图
引入JS，箩筐地图不需要安全秘钥
<script src="https://webapi.luokuang.com/maps?ak=箩筐地图key"></script>
根据调研，我们所使用的功能，需要用到一些组件，官网demo给的引入js是这样的
<script src="https://webapi.luokuang.com/maps?ak=箩筐地图key&plugins=Geocoder"></script>
（后面的组件不就是高德地图吗，应该是他们使用了一些高德地图的组件，哈哈）
然后设置地图容器，还是要注意设置容器的宽和高，否则地图出不来
<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>
<style>
#container {
width: 100%;
height: 300px;
}
#search {
position: absolute;
right: 0;
top: 0;
width: 18%;
}
</style>
<script>
var marker = null;
var circle = null;
var geocoderService = null;
var position = new LKMap.LngLat(113.683182,34.753023);
var zoom = 15;
var map = new LKMap.Map("container",{
center: position, // 中心点
zoom: zoom, // 缩放级别
style:"lkmap://styles/standard", // 地图样式
})
</script>实现效果如下：
注意：1箩筐地图需要设置中心点坐标，否则默认定位到首都；2地图级别不会自适应，需要手动设置。
参考官网给出的设置方法
这里我们主要用到setCenter() 和 setZoom方法，以便根据获取到的坐标进行定位，并将定位切换到地图中心位置，绘制完圆形范围后，可以自适应显示大小。
3 根据输入地址获取坐标
使用箩筐地图的你离和逆地理编码方法实现
实现方法：
var map = new LKMap.Map("container",{
center: position, // 中心点
zoom: zoom, // 缩放级别
style:"lkmap://styles/standard", // 地图样式
})
map.on('load', function () {
geocoderService = new LKMap.Geocoder({
size: 14,
});
// 地理编码
function get_location()
{
var address = $('#addr').val();
if (address)
{
geocoderService.getLocation(address, function(status, result) {
console.log(result);
console.log(status);
if (status == 'complete' && result.accuracy == true)
{
var gps = result.coordinates[0] + "," + result.coordinates[1];
$('#Gps').val(gps);
//var position = [result.coordinates[0],result.coordinates[1]];
var position = new LKMap.LngLat(result.coordinates[0], result.coordinates[1]);
addCircle(position);
}
else
{
layer.msg('请输入正确的地址');
}
});
}
else
{
layer.msg('请输入正确的地址');
}
}
//事件绑定
document.getElementById("search").onclick = get_location;
})同样的的需要注意点击事件的绑定。
这里需要手动将坐标切换到中心点位置，用setCenter()方法，否则定位成功，地图并没有任何变化，让我纠结了好半天，一直以为没有成功。。。
4 绘制圆形范围
此处使用绘制面方法绘制圆形覆盖物
代码如下
/**
* 添加覆盖物
* @param position
*/
function addCircle(position) {
circle && circle.remove();
map.setCenter(position);
var radius = $('#Radius').val();
var num = get_zoom(radius);
map.setZoom(num);
circle = new LKMap.Circle({
center: position,
radius: radius, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.4, //填充透明度
cursor: 'move', // 鼠标悬停时的鼠标样式
});
circle.setMap(map);
}这里绘制圆形成功后，一定要将坐标换到中心位置，否则你都不知道圆形会知道哪里去了。。。
箩筐地图并没有根据覆盖物来自适应显示地图的级别，需要使用setZoom()方法来设置，我自己写了几个值来调整不同半径对应显示地图级别
/**
* 根据半径获取地图缩放级别
* @param radius
* @returns {number}
*/
function get_zoom(radius)
{
var num = zoom;
if (radius >= 1000)
{
num = 12;
}
else if (radius >= 800)
{
num = 13;
}
else if (radius >= 500)
{
num = 14;
}
else if (radius >= 200)
{
num = 15;
}
else if (radius >= 100)
{
num = 16;
}
return num;
}5 点击地图获取坐标
此功能暂未实现，大家可参考官网自行处理
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' id="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 marker = null;
var circle = null;
var geocoderService = null;
var position = new LKMap.LngLat(113.683182,34.753023);
var zoom = 15;
var map = new LKMap.Map("container",{
center: position, // 中心点
zoom: zoom, // 缩放级别
style:"lkmap://styles/standard", // 地图样式
})
map.on('load', function () {
geocoderService = new LKMap.Geocoder({
size: 14,
});
// 地理编码
function get_location()
{
var address = $('#addr').val();
if (address)
{
geocoderService.getLocation(address, function(status, result) {
console.log(result);
console.log(status);
if (status == 'complete' && result.accuracy == true)
{
var gps = result.coordinates[0] + "," + result.coordinates[1];
$('#Gps').val(gps);
//var position = [result.coordinates[0],result.coordinates[1]];
var position = new LKMap.LngLat(result.coordinates[0], result.coordinates[1]);
addCircle(position);
}
else
{
layer.msg('请输入正确的地址');
}
});
}
else
{
layer.msg('请输入正确的地址');
}
}
//事件绑定
document.getElementById("search").onclick = get_location;
})
/**
* 添加覆盖物
* @param position
*/
function addCircle(position) {
circle && circle.remove();
map.setCenter(position);
var radius = $('#Radius').val();
var num = get_zoom(radius);
map.setZoom(num);
circle = new LKMap.Circle({
center: position,
radius: radius, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.4, //填充透明度
cursor: 'move', // 鼠标悬停时的鼠标样式
});
circle.setMap(map);
}
$(function(){
var id = $('#id').val();
if (id)
{
var gps = $('#Gps').val();
if (gps)
{
var location = gps.split(",");
position = new LKMap.LngLat(location[0], location[1]);
map.setCenter(position);
var radius = $('#Radius').val();
var num = get_zoom(radius);
map.setZoom(num);
addCircle(position);
}
}
})
/**
* 根据半径获取地图缩放级别
* @param radius
* @returns {number}
*/
function get_zoom(radius)
{
var num = zoom;
if (radius >= 1000)
{
num = 12;
}
else if (radius >= 800)
{
num = 13;
}
else if (radius >= 500)
{
num = 14;
}
else if (radius >= 200)
{
num = 15;
}
else if (radius >= 100)
{
num = 16;
}
return num;
}
</script>最后，箩筐地图好像不是很稳定，昨天还好好的，今天就很多次定位失败，偶有成功，希望箩筐地图能做的更好些。
猜你喜欢
- 【Html】H5跳转支付宝小程序的两种方式
- H5跳转支付宝小程序的两种方式，第一种方式还可以打开支付宝生活号网页，只是换成appid换成网页应用appid，page参数换成url参数，url对应的是自己页面的链接
- 【前端】如何使用Redis和TypeScript开发高性能计算功能
- 如何使用Redis和TypeScript开发高性能计算功能概述：Redis是一个开源的内存数据结构存储系统，具有高性能和可扩展性的特点。TypeScript是JavaScript的超集，提供了类型系统和更好的开发工具支持。结合Redis和TypeScript，我们可以开发出高效的计算功能来处理大数据集，并充分利用Redis的内存存储和计算能力。本文将介绍如何利用Redis和TypeScript开发高性能计算功能，包括数据存储、数据处理和结果缓存等方面。我们将使用Redis的常用数据结构和命令，并
- 【前端】全栈软件开发工程师需要具备哪些技能
- 全栈软件开发工程师需要具备前端、后端和数据库等多方面的技能，以便能够在整个应用开发周期中承担各种任务。以下是典型的全栈软件开发工程师的技能栈：一、前端技能：1.HTML/CSS/JavaScript:构建网页的基本技能，负责页面结构、样式和交互。2.前端框架：掌握至少一种前端框架，如 React.js、Vue.js、Angular，用于构建可维护的、高性能的前端应用。3.前端工具：使用构建工具（Webpack、Parcel）、包管理工具（npm、Yarn）、代码规范工具（ESLint、Prett
- 【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() 方
- 【前端】微信小程序跳转公众号的三种方式
- 最近因为项目需要，要在小程序页面添加按钮，点击跳转公众号对应页面，目前没有直接点击按钮从小程序跳转到公众号页面的方法，但也有变相的实现方法，最后采用小程序webview内嵌公众号页面的方法来实现相关功能，在此记录一下：相关参考：小程序跳转公众号的三种方法 | 微信开放社区 (qq.com)开放能力 / official-account (qq.com)方法: 1: 公众号组件<official-account></official-account>
- 【前端】PHP、Vue和React：如何选择最适合的前端框架？
- PHP、Vue和React：如何选择最适合的前端框架？随着互联网技术的不断发展，前端框架在Web开发中起着至关重要的作用。PHP、Vue和React作为三种具有代表性的前端框架，每一种都具有其独特的特点和优势。在选择使用哪种前端框架时，开发人员需要根据项目需求、团队技能和个人偏好做出明智的决策。本文将通过比较PHP、Vue和React这三种前端框架的特点和使用场景，帮助读者更好地选择最适合自己的前端框架。PHPPHP作为一种服务器端脚本语言，被广泛应用于Web开发中。尽管PHP主要用于后端开发，
栏目分类全部>