lizhen
/
yuanshan_zuche


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
							<!doctype html>
<html>
<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="/assets/amap/main1119.css"/>
    <link rel="stylesheet" href="/assets/amap/AMap.DrivingRender1120.css"/>
    <script src="/assets/amap/jquery.min.js"></script>
    <style>
        #container{
            width: 100%;
            height: 100%;
            position:relative;
            overflow: hidden;
            float: right;
        }
        /* #tool{
            width: 16%;
            height: 100%;
            overflow: auto;
            box-shadow:0 0 14px rgba(0,0,100,.2);
            height: 100%;
            background-color: white;
            float: right;
            z-index: 9999;
        } */
        #tool{
            top:30px;
            right: 30px;
            background-color: white;
            z-index: 9999;
            position: fixed;
            padding: 14px;
        }
        #tool #closeMouse, #submit{
            font-size: 15px;
            color:#fff;
            background-color: #009BD8;
            border: none;
            cursor: pointer;
        }
        #submit{
            margin-top: 10px;
        }
    </style>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=c4aa94e8e82fe1825d3d34d54a0edfb1&plugin=AMap.Driving,AMap.MouseTool,AMap.PolyEditor,AMap.ToolBar"></script>
    <script type="text/javascript" src="/assets/amap/DrivingRender1230.js"></script>
    <script type="text/javascript" src="/assets/amap/addToolbar.js"></script>
</head>
<body>

<div id="container"></div>
<div id="tool">
    <button id="closeMouse">重置</button>
    <button id="submit">提交</button>
</div>
<!-- 
<div id="tool">
    <center>
        <button id="circle">画圆</button>
        <button id="rectangle">矩形</button>
        <button id="polygon">多边形</button>
        <button id="closeMouse">清除</button>
        <button id="testCircle">判断一个点是否在一个圆里</button>
        <button id="testPolygon">判断一个点是否在一个多边形里</button>
    </center>
</div> -->
<!-- 
<div id="panel">
 
</div> -->

<!-- <div style="height: 10%;float: left"> -->
</div>
<script type="text/javascript">

    var status;

    var map = new AMap.Map("container", {
        center: <?php echo json_encode($center); ?>,
        // zoom: 8.8,
        resizeEnable: true
    });

    map.plugin(["AMap.ToolBar"],function(){   //在地图中添加ToolBar插件
        toolBar = new AMap.ToolBar();
        map.addControl(toolBar);
    });
    // toolBar.hide();

    map.plugin(["AMap.MouseTool"],function(){        //鼠标工具插件
        mousetool = new AMap.MouseTool(map);
        status = 'polygon';
        mousetool.polygon();
    });
    // $('#circle').click(function(){
    //     status = 'circle';
    //     mousetool.circle();
    // });
    // $('#rectangle').click(function(){
    //     status = 'rectangle';
    //     mousetool.rectangle();
    // });
    // $('#polygon').click(function(){
    //     status = 'polygon';
    //     mousetool.polygon();
    // });
    //初始显示多边形
    /*var arr = [
        [119.355121, 35.535662],
        [119.38602, 35.488712],
        [119.450565, 35.554099],
        [119.450565, 35.554099],
        [119.39838, 35.560802],
    ];*/
    var arr = <?php echo json_encode($zuobiao); ?>;
    function createPolygon(arr){
        var polygon1 = new AMap.Polygon({
            path: arr,
            fillColor: '#ACD5F6',
            strokeOpacity: 1,
            fillOpacity: 0.6,
            strokeColor: '#2598FC',
            strokeWeight: 2,
            // strokeStyle: 'dashed',
            // strokeDasharray: [5, 5],
        });
        map.add(polygon1);
    }
    createPolygon(arr);


    //监听点击事件

    AMap.event.addListener(mousetool, 'draw', function(e) {
        clearPolygon(); //只能画一次，清空之前
        //arr = e.obj.getPath();//获取路径坐标

        if(status == 'circle'){
            lng = e.obj.getCenter().lng;
            lat = e.obj.getCenter().lat;
            radius = e.obj.getRadius();
        }else if(status == 'polygon' || status == 'rectangle'){
            var path = e.obj.getPath();
            arr = [];
            clearPolygon();
            for(var i=0;i<path.length;i++){
                arr.push([path[i].lng,path[i].lat]);
            }
            // console.log(arr);
            createPolygon(arr);
        }

        //console.log(e.obj.getRadius());
        //console.log(e.obj);
    });
    //重置
    $('#closeMouse').click(function(){
        clearPolygon();
        arr=[];
    });
    function clearPolygon(){
        //清空本次多边形
        // mousetool.close(false);
        // status = 'polygon';
        // mousetool.polygon();

        // 清空之前多边形
        // var polylines = [polygon1];
        // map.remove(polylines);

        map.clearMap();
    }
    //提交
    $('#submit').click(function(){
        if(arr.length ===0){
            alert("请绘制多边形区域")
            return;
        }
        console.log("arr===",arr);
        //
        $.post(
            '/admin.php/storezuobiao/zuobiaosubmit',
            {
                'id': {$id},
                'zuobiao': JSON.stringify(arr),
            },
            function(data){
                alert('设置成功');
            },
        );

        /*$.ajax({
            type: 'POST',
            url: 'storetools/zuobiaosubmit',
            dataType: 'json',
            contentType: "application/json",
            data : {
                'id': 4,
                'zuobiao': JSON.stringify(arr),
            },
            success : function(data){
                alert('设置成功');
            },
            fail:function(data){
                alert('11112');
            }
        })*/
    });
    // var lat;
    // var lng;
    // var radius;

    // $('#testCircle').click(function(){
    //     var myLngLat = new AMap.LngLat(116.403984,39.907535);
    //     var circle = new AMap.Circle({
    //         center: new AMap.LngLat(lng,lat),// 圆心位置
    //         radius: radius //半径
    //     });
    //     if(circle.contains(myLngLat)){
    //         alert('在');
    //     }else{
    //         alert('不在');
    //     }
    // });

    // var arr = [];
    // $('#testPolygon').click(function(){
    //     var myLngLat = new AMap.LngLat(116.403984,39.907535);
    //     // 定义一个多边形
    //     var polygon = new AMap.Polygon({
    //         path: arr
    //     });

    //     if(polygon.contains(myLngLat)){
    //         alert('在');
    //     }else{
    //         alert('不在');
    //     }
    // });
</script>
</body>
</html>