公众号获取用户定位并判断是否在高德地图框选的范围内
公众号获取用户定位并判断是否在高德地图框选的某范围内
- 需求描述
- 基本思路
- 代码实现
需求描述
限定用户位置必须在指定范围内，才可进行业务操作。
比如上篇文章《生成带参数微信二维码两种方法整理》中的居民满意度调查需求，必须限定居民打分操作在小区范围内，才可进行打分操作。
基本思路
- 根据小区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 ~ -90var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。var speed = res.speed; // 速度，以米/每秒计var accuracy = res.accuracy; // 位置精度//调用获取当前位置的方法getAddressInfo(latitude,longitude);//显示x yif(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 () {//回调函数//实例化Geocodergeocoder = 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();本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！