dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="description" content=""/>
    <meta name="keywords" content="扫码支付，线上投币，运营数据，物联网"/>
    <meta name="format-detection" content="telphone=no,email=no"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>设备地理位置</title>
    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css"/>
    <link rel="stylesheet" href="../components/custom/css/common.css"/>
    <link rel="stylesheet" href="css/xyf.common.min.css">
    <style>

    </style>
</head>
<body>

<div class="map-container">
    <div id="allmap"></div>

    <div class="map-top">
        <input class="address-search" id="addressSearch" placeholder="输入地址"/>
        <i class="iconfont icon-location"></i>
    </div>

    <div class="address-pop"></div>
    <div class='center-mark'><i class='iconfont icon-location-b c-primary'></i></div>
    <div class="set-current-location iconfont icon-location-c"></div>

    <div class="map-bottom">
        <div class="address-cancel btn">取消</div>
        <div class="address-ok btn">确定</div>
    </div>
</div>

<script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
<script src="/components/custom/js/common.js"></script>
<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=9579bf3cb9fdab9d6b49cdaf72c9907f"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script src="../components/lib/gcoord.js"></script>
<script src="js/xyf.common.js"></script>
<script>
    var info = {
        lng: getQueryString("lng"),
        lat: getQueryString("lat"),
        logicalCode: getQueryString("logicalCode"),
    }

    initAddressSelect({lng: info.lng, lat: info.lat});//尝试初始化地图

    function closeMapDialog() {
        history.back();
    }

    // 下拉框选择附近的位置
    var selectPoint = {};
    var mapLoaded = false;

    function initAddressSelect(initPoint) {
        initPoint = new BMap.Point(initPoint.lng, initPoint.lat);
        if (mapLoaded) {
            // 避免多次加载
            return;
        }
        mapLoaded = true;

        //取消或确认选点
        $('.map-bottom .btn').off().tap(function () {
            if ($(this).hasClass("address-cancel")) {
                //点击取消
                closeMapDialog(true)
            } else if ($(this).hasClass("address-ok")) {
                saveLocation();
            }
            return false;
        });

        // 创建地理编码实例
        var myGeo = new BMap.Geocoder();

        // 根据坐标得到地址 并显示在界面、并移动地图
        function getAddressName(currentPoint) {
            // 根据坐标得到地址描述
            myGeo.getLocation(currentPoint, function (result) {
                if (result) {
                    $(".address-pop").text(result.address + " （经度：" + currentPoint.lng + "，纬度：" + currentPoint.lat + '）').addClass('active')

                    selectPoint = currentPoint;//【缓存当前经纬度，供后台保存】！！！
                    map.centerAndZoom(currentPoint, 16);//移动地图到当前位置
                }
            });
        }

        // 获得当前位置 并移动地图和显示位置信息
        function getCurrent(callback) {

            getLocation(function (res) {
                if (res) {
                    //转换为百度可用的坐标
                    var pointList = gcoord.transform(
                        [res.lng, res.lat],
                        gcoord.GCJ02,  // 当前坐标系
                        gcoord.BD09 // 目标坐标系
                    );
                    var currentPoint = new BMap.Point(pointList[0], pointList[1]);
                    if (callback) {
                        callback(currentPoint);
                    } else {
                        getAddressName(currentPoint)
                    }
                }
            });

        }

        var map = new BMap.Map("allmap");
        map.setMapStyle({
            styleJson: [
                {
                    "featureType": "all",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#888888"
                    }
                },
                {
                    "featureType": "poilabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }
            ]
        });
        map.addEventListener("touchstart", function () {
            $("#addressSearch").blur();
        });
        map.addEventListener("dragstart", function () {
        });
        map.addEventListener("dragend", function () {
            var point = map.getCenter();
            getAddressName(point)
        });
        map.addEventListener("zoomend", function () {
            var point = map.getCenter();
            getAddressName(point)
        });

        // 搜索输入
        var isFirst = true;
        //地址搜索建议，location参数表示根据当前区域进行搜索
        var ac = new BMap.Autocomplete({
            "input": "addressSearch", location: {}, "onSearchComplete": function (result) {
                if (isFirst) {
                    $(".tangram-suggestion-main").hide();
                    isFirst = false;
                }
            }
        });

        //鼠标点击下拉列表后的事件
        ac.addEventListener("onconfirm", function (e) {
            $("#addressSearch").blur();

            var _value = e.item.value;
            var myValue = _value.street + _value.business;

            var detail = _value.province + _value.city + _value.district + myValue
            // 根据详细地址得到坐标
            myGeo.getPoint(detail, function (result) {
                selectPoint = result;
                if (!selectPoint) {
                } else {
                    map.centerAndZoom(selectPoint, 16);
                    $(".address-pop").text(detail + " （经度：" + selectPoint.lng + "，纬度：" + selectPoint.lat + '）').addClass('active')
                }
            });

            return myValue;
        });

        // 定位按钮事件
        $(".set-current-location").click(function () {
            getCurrent();
        });

        // 初始化移动到 存储点
        if (initPoint.lat) {
            getAddressName(initPoint);
        } else {
            getCurrent();
        }
    }

    //保存位置信息
    function saveLocation() {
        if (!selectPoint) {
            mui.toast("请先定位！");
        }

        var data = {
            'logicalCode': info.logicalCode,
            'lng': selectPoint.lng,
            'lat': selectPoint.lat
        };

        myAjax({
            url: "/device/updateLocation",
            type: "POST",
            mask: false,
            async: true,
            timeout: 70000,
            success: function (res) {
                if (res.result == 1) {
                    mui.toast("上报成功！");

                    setTimeout(function () {
                        history.back()
                    }, 1000);

                }
            },
            data: data,
            dataType: 'json'
        });
    }


</script>
</body>
</html>