公众号获取用户定位并判断是否在高德地图框选的范围内

需求描述

限定用户位置必须在指定范围内，才可进行业务操作。
比如上篇文章《生成带参数微信二维码两种方法整理》中的居民满意度调查需求，必须限定居民打分操作在小区范围内，才可进行打分操作。

基本思路

1. 根据小区ID，获取小区的地理面数据数据；
2. 微信公众号端获取用户位置授权，获取用户的经纬度。
3. 判断用户坐标是否在小区坐标范围内，在范围内才可进行打分操作。

代码实现

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();