需求描述
限定用户位置必须在指定范围内,才可进行业务操作。
比如上篇文章《生成带参数微信二维码两种方法整理》中的居民满意度调查需求,必须限定居民打分操作在小区范围内,才可进行打分操作。
基本思路
- 根据小区ID,获取小区的地理面数据数据;
- 微信公众号端获取用户位置授权,获取用户的经纬度。
- 判断用户坐标是否在小区坐标范围内,在范围内才可进行打分操作。
代码实现
HTML页码
<div class="bigtitle">小区名称</div>
<div class="inputborder">
<div class="layui-block">
<input type="text" id="saDName" class="layui-input" value="" name="saDName">
</div>
</div>
<div class="bigtitle" style="color: red">位于小区内才可进行评分操作</div>
<div class="bigtitle">您所在位置</div>
<textarea id="address" name="lAddress" placeholder="您所在位置"></textarea>
<!-- 高德地图显示-->
<div id="container" style=" width: calc(100% - 20px);height: 200px;margin: 0 10px 10px 10px;"></div>
<div class="inputborder">
<div class="layui-block">
<input type="text" id="lPosition" name="lPosition" class="layui-input" value="[114.142415,22.587156]" readonly>
</div>
</div>
js引用文件
<!--高德地图相关 js-->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.9&key=你的key&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.CircleEditor,AMap.Marker"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<!--微信公众号 js-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
js实现代码
window.onload = function () {
//获取打分用户定位
getUserPosition();
}
function getUserPosition(){
$.ajax({
type: "post",
url: pre_server_url + "/wx/signature", //pre_server_url 为你的服务地址
data: {'url': window.location.href},
async: false,
crossDomain: true,
success: function (result) {
var datas = result.data;
wx.config({
debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: APPID, // 必填,公众号的唯一标识
timestamp: datas.timeStamp, // 必填,生成签名的时间戳
nonceStr: datas.randomStr, // 必填,生成签名的随机串
signature: datas.sha1,// 必填,签名
jsApiList: ['getLocation', 'openLocation'] // 必填,需要使用的JS接口列表
});
wx.ready(function () {
wx.getLocation({
type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
//调用获取当前位置的方法
getAddressInfo(latitude,longitude);
//显示x y
if(latitude != null){
var x = latitude.toString().substring(0,9);
}
if(longitude != null){
var y = longitude.toString().substring(0,10);
}
// $("[name=lPosition]").val("[ "+x+","+y+" ]");y
$("[name=lPosition]").val("[ "+y+","+x+" ]");
},
cancel: function (res) {
mui.toast("用户拒绝授权获取地理位置");
}
});
})
}
});
}
//根据想x,y 调用高德api 获取详细地址
function getAddressInfo(lat,lng) {
AMap.service('AMap.Geocoder', function () {//回调函数
//实例化Geocoder
geocoder = new AMap.Geocoder();
//地图上所标点的坐标 微信获取经纬度
var lnglatXY = [lng, lat];
geocoder.getAddress(lnglatXY, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
//获得了有效的地址信息,以上就是获取位置的方法,下边是我的业务需要 再次调用api接口获得城市的区号
var data=result.regeocode.addressComponent,
province = data.province,
city = data.city,
district = data.district;
//获取详细地址
var address = result.regeocode.formattedAddress;
//截取掉前3位
address = address.substring(3);
//显示当前详细地址
$("#address").val(address);
} else {
//获取地址失败
mui.toast("获取地址失败");
}
});
})
}
//初始化地图对象,加载地图
var map = new AMap.Map("container", {
resizeEnable: true,
zoom: 13
});
//小区面数据
var disticArea =[[114.14344,22.584795],[114.145045,22.58497],[114.145424,22.586758],[114.144563,22.586766],[114.144145,22.588935],[114.141807,22.589256],[114.140971,22.58673],[114.142296,22.586035],[114.142304,22.585153],[114.143001,22.583885],[114.14344,22.584795]];
// 创建多边形
var polygon = new AMap.Polygon({
map: map,
fillOpacity:0.4,
path: disticArea //小区面数据 可换成动态获取的
});
// 创建点
var marker = new AMap.Marker({
map: map,
draggable:false, //禁止拖动
position: eval($("#lPosition").val()) //userPosition
});
function compute(){
var point = marker.getPosition();
var isPointInRing = AMap.GeometryUtil.isPointInRing(point,getDName(dId)[1]);
marker.setLabel({
content:isPointInRing?'内部':'外部',
//content:isPointInRing?'您的位置':'您的位置',
offset:new AMap.Pixel(20,0)
});
if(isPointInRing){
console.log("在哪里", "内部");
}else{
console.log("在哪里", "外部");
$("#submitButton").attr({"disabled":"disabled"});
}
}
// setTimeout('compute()', 3000); //延迟1秒
compute();
// 为marker绑定拖拽事件
//marker.on('dragging',compute)
map.setFitView();