uskycloud
/
usky-web-mobile


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
							<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图采集</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" type="text/css" href="./js/M_select/M_select.css">
    <link rel="stylesheet" type="text/css" href="./js/notification/index.css">
    <style>
        html,
        body,
        #mapF {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="mapF" class="map" tabindex="0"></div>

    <div id="myPageTop">
        <input id="tipinput" />
    </div>

    <div style="display:flex; width: 100%; position: absolute; bottom: 50px;justify-content: center;">
        <button class="btn" onclick="handleButtom('重画')"
            style="width: 80px;border: 0;background-color: #d9001b; color:#fff;padding: 0.60rem 0.5rem;margin-right: 15px;">重画</button>
        <button class="btn" onclick="handleButtom('保存')"
            style="width: 80px;border: 0;background-color: #25A5F7; color:#fff;padding: 0.60rem 0.5rem;margin-left: 15px;">保存</button>
    </div>

    <script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: 'ce0e44758ad6b69607e23bf8e6a6ac11',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=14aefebea926bb958032d5daf836fadf">
    </script>

    <script type="text/javascript" src="https://webapi.amap.com/ui/1.1/main.js"></script>
    <script type="text/javascript" src="./js/jquery-2.2.1.min.js"></script>

    <!-- uni 的 SDK -->
    <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
    <script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>

    <script type="text/javascript">

        var form = {};
        var typeName = "";

        var map = [];

        var marker = null;//创建点标记
        var regeocode = {};//获取解析详细地址数据存储
        var longitude = "";//点标记经度数据存储
        var latitude = "";//点标记纬度数据存储

        var polyEditor = null; //创建画布
        var polyEditorArray = [];//画布数据存储


        /**
         * 初始化
         */
        function initMap() {
            map = new AMap.Map("mapF", {
                // mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
                resizeEnable: true,
                center: [121.4737021, 31.2303904],
                zoom: 13,
                zooms: [3, 16],
            });

            map.setFitView();

            setTimeout(() => {
                AMap.plugin(["AMap.PolygonEditor,AMap.PolylineEditor"], function () {
                    handleAutoComplete();//调用输入提示功能

                    if (typeName === "点") {
                        marker = new AMap.Marker({});//初始化点标记
                        handleMarker();
                    } else if (typeName === "线") {
                        polyEditor = new AMap.PolylineEditor(map);//初始化画布
                        handlePolyline();
                    } else if (typeName === "面") {
                        polyEditor = new AMap.PolygonEditor(map);//初始化画布
                        handlePolygon();
                    }
                })
            }, 1000);
        }

        /**
         * 输入提示
         */
        function handleAutoComplete() {
            AMap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geocoder"], function () {
                var autoOptions = {
                    input: "tipinput",
                };
                var auto = new AMap.AutoComplete(autoOptions);

                var placeSearch = new AMap.PlaceSearch({
                    city: "全国",
                    map: map,
                }); //构造地点查询类
                auto.on("select", select); //注册监听，当选中某条记录时会触发
                function select(e) {
                    longitude = e.lnglat.getLng()
                    latitude = e.lnglat.getLat()

                    placeSearch.setCity(e.poi.adcode);
                    placeSearch.search(e.poi.name); //关键字查询查询

                    handleAddress()
                }
            });
        }

        /**
         * 点
         */
        function handleMarker() {
            //地图点标记回显
            if (form.longitude && form.latitude) {
                longitude = form.longitude
                latitude = form.latitude

                marker = new AMap.Marker({
                    position: new AMap.LngLat(form.longitude, form.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                });

                handleAddress()
            }

            //为地图注册click事件获取鼠标点击出的经纬度坐标
            map.on("click", function (e) {
                longitude = e.lnglat.getLng()
                latitude = e.lnglat.getLat()

                map.remove([marker]);
                marker = new AMap.Marker({
                    position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                });

                handleAddress()
            });
        }

        /**
         * 线
         */
        function handlePolyline() {
            var polygon = new AMap.Polyline({
                path: form.gpsAreas
            })

            if (form.gpsAreas.length > 0) {
                map.add([polygon]);

                polyEditor.close();
                polyEditor.setTarget(polygon);
                polyEditor.open();

                polyEditorArray = form.gpsAreas
            } else {
                polyEditor.close();
                polyEditor.setTarget();
                polyEditor.open();
            }

            polyEditor.on("end", function (event) {
                //绘制结束后坐标集合
                polyEditorArray = event.target.$x[0]
            });
        }

        /**
         * 面
         */
        function handlePolygon() {
            var polygon = new AMap.Polygon({
                path: form.gpsAreas
            })

            if (form.gpsAreas.length > 0) {
                map.add([polygon]);

                polyEditor.close();
                polyEditor.setTarget(polygon);
                polyEditor.open();

                polyEditorArray = form.gpsAreas
            } else {
                polyEditor.close();
                polyEditor.setTarget();
                polyEditor.open();
            }

            polyEditor.on("end", function (event) {
                //绘制结束后坐标集合
                polyEditorArray = event.target._opts.path
            });
        }

        /**
         * 反解析地址
         */
        function handleAddress() {
            AMap.plugin(["AMap.Geocoder"], function () {
                let zb = [longitude, latitude];
                map.add(marker);
                marker.setPosition(zb);
                var geocoder = new AMap.Geocoder({
                    city: "", //城市设为北京，默认：“全国”
                    radius: 1000, //范围，默认：500
                });
                geocoder.getAddress(zb, function (status, result) {
                    if (status === "complete" && result.regeocode) {
                        regeocode = result.regeocode
                    } else {
                        alert("根据经纬度查询地址失败");
                    }
                });
            });
        }

        /**
         * APP-PLUS
         * 接收父页面传过来的值
         */
        window.receiveData = function (msg) {
            // console.log("子页面：", msg)
            // alert(msg.dataType)
            form = msg.dataArray
            typeName = msg.dataType
            initMap();
        }

        /**
         * H5
         * 接收父页面传过来的值
         */
        window.addEventListener("message", function (event) {
            if ("funcName" in event.data) {
                console.log("子页面：", event);
                form = JSON.parse(event.data.param)
                typeName = event.data.typeName
            }
            initMap();
        });

        /**
         * 按钮点击事件
         */
        function handleButtom(value) {
            if (value == '重画') {
                if (typeName === "点") {
                    map.remove([marker]);
                    form.longitude = ""
                    form.latitude = ""
                    form.province = ""
                    form.city = ""
                    form.area = ""
                    form.streetTown = ""
                    form.facilityAddress = ""
                    form.address = ""
                } else if (typeName === "线" || typeName === "面") {
                    polyEditor.close();
                    polyEditor.setTarget();
                    polyEditor.open();
                    map.clearMap();
                    polyEditorArray = []
                }

            } else if (value == '保存') {

                if (typeName === "点") {
                    form.longitude = longitude
                    form.latitude = latitude

                    form.province = regeocode.addressComponent.province
                    form.city = regeocode.addressComponent.city
                    form.area = regeocode.addressComponent.district
                    form.streetTown = regeocode.addressComponent.township;
                    form.facilityAddress = regeocode.addressComponent.street + regeocode.addressComponent.streetNumber;
                    form.address =
                        form.province + form.city + form.area + form.streetTown + regeocode.addressComponent.street + regeocode.addressComponent.streetNumber;
                } else if (typeName === "线" || typeName === "面") {
                    polyEditor.close();
                    form.gpsAreas = polyEditorArray
                }

                //向主页面推送消息

                //APP-PLUS
                uni.postMessage({
                    data: JSON.stringify(form)
                });

                //H5
                var message = {
                    funcName: "message",
                    param: JSON.stringify(form),
                };
                if (window.parent) {
                    window.parent.postMessage(message, '*');
                }
            }
        }
    </script>
    <style>
        .amap-logo,
        .amap-copyright {
            display: none !important;
        }

        #myPageTop {
            position: absolute;
            left: 10px;
            top: 10px;
            background: transparent;
            font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
            font-size: 13px;
        }

        #myPageTop input {
            width: 18rem;
            border: 1px solid #ced4da;
            border-radius: 5px;
            padding: 5px;
        }

        #myPageTop input:focus {
            outline: none;
            border-radius: 5px;
            border: 1px solid #25A5F7;
        }
    </style>
</body>

</html>