yf_zd
/
yfwlwCut


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <!-- <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}"> -->
    <!-- <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}"> -->
    <title>森林防火</title>
    <style>
        body {
            background: #fff;
        }
        /* 打开窗体自定义 */
        .openWindow{
            position: relative;
            border: solid 1px silver;
            background-color: #fff;
            border-radius: 5px;
            width: 300px;
        }
        .openWindow .title{
            line-height: 30px;
            border-bottom: solid 1px silver;
            padding-left: 15px;
        }
        .openWindow .title img{
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
            cursor: pointer;
        }
        .openWindow .title.error{
            color: red;
        }
        .openWindow .area{
            font-size: 12px;
            color: #646464;
            padding: 10px 15px;
        }
        .openWindow .elementUl{
            display: flex;
            justify-content: space-around;
            margin: 0px 10px;
        }
        .openWindow .elementUl li{
            text-align: center;
        }
        .openWindow  .lookJkDiv{
            text-align: center;
            margin: 10px;
        }
        .openWindow  .lookJkDiv button{
            border: none;
            background: #55b0ff;
            color: #fff;
            padding: 4px 10px;
            border-radius: 11px;
            font-size: 12px;
            letter-spacing: 1px;
        }
        .bottom-center .amap-info-sharp{
            bottom: 1px;
        }
    </style>

    <body>
        <div class="content">
            <!-- <div class="page-header">
                <h1>
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">
                            无人机
                        </font>
                    </font>
                </h1>
            </div> -->
            <div id="map"></div>
        </div>

        <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
        <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
        <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=a223a998dc112437cb32afb43a8b2c24'></script>
        <!-- UI组件库 1.0 -->
        <!-- <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> -->
        <script src="{% static '/js/common.js' %}?versions=0.5.0"></script>
        <script>
            $.ajaxSetup({
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
            });
        </script>
        <script>
            getHeight()

            //创建地图
            var map = new AMap.Map('map', {
                zoom: 8
            });
            map.add(new AMap.TileLayer.Satellite());
            var dataArr = [
                {   
                    title:'监测点一',
                    random:2,
                    position:[114.342379,34.847584]
                },
                {   
                    title:'监测点二',
                    random:1,
                    position:[114.117159,35.029959]
                },
                {   
                    title:'监测点三',
                    random:3,
                    position:[113.235506,34.901663]
                },
                {   
                    title:'监测点四',
                    random:5,
                    position:[114.323153,34.47709]
                },
                {   
                    title:'监测点五',
                    random:8,
                    position:[114.142379,34.847584]
                },
            ]
            var markers = [];
            for(var i = 0 ;i<dataArr.length;i++){
                // 创建一个 Marker 实例：
                if(dataArr[i].random % 2 == 0){
                    var image = "../static/bigData/imgs/icon5.svg";
                }else{
                    var image = "../static/bigData/imgs/icon4.svg";
                }
                var marker = new AMap.Marker({
                    position: dataArr[i].position,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    icon: new AMap.Icon({            
                        image: image,
                        size: new AMap.Size(32,32),  //图标大小
                        imageSize: new AMap.Size(32,32)
                    }),
                    extData:dataArr[i]
                });
                
                marker.on('click',function(e){
                    console.log(e.target.getExtData())
                    openInfo(e,e.target.getExtData())
                })
                markers.push(marker);
                if(i == dataArr.length-1){
                    console.log(markers)
                    map.add(markers);
                }
            }

            //在指定位置打开信息窗体
            function openInfo(e,infoMsg) {
                
                //构建信息窗体中显示的内容
                if(infoMsg.random % 2 == 0){
                    var className = "error";
                }else{
                    var className = "";
                }
                var info = '<div class="openWindow">';
                info += '<div class="title '+className+'">'+infoMsg.title+'<img onclick="closeInfoWindow()" src="https://webapi.amap.com/images/close2.gif"></div>';
                info += '<div class="area">详细地址：河南省郑州市金水区瀚海北金B座</div>';
                info += '<ul class="elementUl"><li><div>20°C</div><p>空气温度</p></li><li><div>70%</div><p>空气湿度</p></li><li><div>西南偏北</div><p>风向</p></li><li><div>0</div><p>降雨量</p></li></ul>';
                info += '<div class="lookJkDiv"><button onclick="getJkPage('+infoMsg.random+')">查看监控</button></div></div><div class="amap-info-sharp"></div>'

                infoWindow = new AMap.InfoWindow({
                    isCustom: true,  //使用自定义窗体
                    content: info,  //使用默认信息窗体框样式，显示信息内容
                    offset: new AMap.Pixel(8, -28)
                });

                infoWindow.open(map, e.target.getPosition());
            }

            function getHeight() {
                var width = $('#map').css('width').replace("px", "");
                var height = width * (9 / 16)
                console.log(width)
                console.log(height)
                $('#map').css('height', height)
                scrollBar()
            }

            function getJkPage(id){
                window.location.href = 'equipmanage_jk'
            }
            //关闭信息窗体
            function closeInfoWindow() {
                map.clearInfoWindow();
            }
            window.onresize = function () {
                getHeight()
            }
        </script>
    </body>

</html>