zoukankan      html  css  js  c++  java
  • 地图添加标记物 并添加点击弹出框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>地图管理</title>

        <link href="css/common.css" rel="stylesheet" type="text/css" />
        <link href="css/Recharge.css" rel="stylesheet" type="text/css" />
        <link href="css/input.css" rel="stylesheet" type="text/css" />
        <link href="css/time.css" rel="stylesheet" type="text/css" />
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <link href="css/manage.css" rel="stylesheet" type="text/css" />
        <link href="css/index.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eLjXm9BSkrtELQVsgcG98tKe"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
        <title>地图管理</title>
        <style type="text/css">
            .anchorBL{display:none;}
             img {
                height: 20px;
                margin-top: 5px;
                17px;
                line-height: 20px;
                margin-left:10px;
            }

            .infoBoxContent{font-size:12px;}
            .infoBoxContent .title{background:red no-repeat;height:42px;272px;}
            .infoBoxContent .title strong{font-size:14px;line-height:42px;padding:0 10px 0 5px;}
            .infoBoxContent .title .price{color:#FFFF00;}
            .infoBoxContent .list{268px;border:solid 1px #4FA5FC;border-top:none;background:#fff;height:260px;}
            .infoBoxContent .list ul{margin:0;padding:5px;list-style:none;}
            .infoBoxContent .list ul li {float:left;255px;border-bottom:solid 1px #4FA5FC;padding:2px 0;}
            .infoBoxContent .list ul .last{border:none;}
            .infoBoxContent .list ul img{53px;height:42px;margin-right:5px;}
            .infoBoxContent .list ul p{padding:0;margin:0;}
            .infoBoxContent .left{float:left;}
            .infoBoxContent .rmb{float:right;color:#EB6100;font-size:14px;font-weight:bold;}
            .infoBoxContent a{color:#0041D9;text-decoration:none;}
        </style>
    </head>
    <body>
       <div class="un_bj ov_hidden">
           <!-- 搜索面板开始 -->
           <div class="showadress">
               <div class="search-btn">
                   <input class="showadress-input" type="text" placeholder="请输入设备名称/序列号/地址" />
                   <button value="查询">查询</button>
               </div>
               <div class="easyui-layout">
                   <div class="easyui-accordion" data-options="fit:true,border:false">
                       <div class="content" margin="5px">
                           <ul id="tree" class="tree easyui-tree" data-options="animate:true,lines:true">
                               <li id="tree-child" state="open" iconCls="icon-ok">
                                   <span>开启1路</span>
                                   <ul>
                                       <li data-option="iconCls:'icon-ok">
                                           <span>脉冲</span>
                                       </li>
                                       <li data-option="iconCls:'icon-group_delete">
                                           <span>流量计</span>
                                       </li>
                                   </ul>
                               </li>
                               <li class="tree-child" state="closed" data-options="iconCls:'icon-joystick'">
                                   <span>开启2路</span>
                                   <ul>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>2路脉冲</span>
                                       </li>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>2路流量计</span>
                                       </li>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>1路流量计1路脉冲</span>
                                       </li>
                                   </ul>
                               </li>
                               <li class="tree-child" state="closed" data-options="iconCls:'icon-joystick'">
                                   <span>开启3路</span>
                                   <ul>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>3路脉冲</span>
                                       </li>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>3路流量计</span>
                                       </li>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>2路流量计1路脉冲</span>
                                       </li>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>1路流量计2路脉冲</span>
                                       </li>
                                   </ul>
                               </li>
                               <li class="tree-child" state="closed" data-options="iconCls:'icon-joystick'">
                                   <span>开启4路</span>
                                   <ul>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>4路脉冲</span>
                                       </li>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>4路流量计</span>
                                       </li>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>3路流量计1路脉冲</span>
                                       </li>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>1路流量计3路脉冲</span>
                                       </li>
                                       <li data-option="iconCls:'icon-joystick_add">
                                           <span>2路流量计2路脉冲</span>
                                       </li>
                                   </ul>
                               </li>
                           </ul>
                       </div>
                   </div>
               </div>
           </div>
           <!-- 搜索面板结束 -->
           <div id="main">
               <div id="Allmap" style=" 1500px; height:600px;border:1px solid red; margin: auto;">

               </div>
           </div>
       </div>
    </body>
    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript">
        var myStyles = [{
            url:  'img/gis/bubble5-ie8.png',
            size: new BMap.Size(94,95),
            opt_anchor: [16, 0],
            textColor: 'white',
            opt_textSize: 10
        }, {
            url:  'img/gis/bubble5-hover-ie8.png',
            size: new BMap.Size(94,95),
            opt_anchor: [40, 35],
            textColor: '#ff0000',
            opt_textSize: 12
        }, {
            url:  'img/gis/bubble5-hover-ie8.png',
            size: new BMap.Size(94,95),
            opt_anchor: [32, 0],
            textColor: 'red',
            opt_textSize: 14
        }];

        var map = new BMap.Map("Allmap",{enableMapClick:false});          // 创建地图实例
        var point = new BMap.Point(116.417854,39.921988);  // 创建点坐标
        map.centerAndZoom(point, 5);                 // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.NavigationControl({
            // 靠左上角位置
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // LARGE类型
            type: BMAP_NAVIGATION_CONTROL_LARGE,
            // 启用显示定位
            enableGeolocation: true
        }));
        map.addControl(new BMap.ScaleControl());// 启用比例尺。
        map.addControl(new BMap.OverviewMapControl());
        //添加切换地图
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP,BMAP_PERSPECTIVE_MAP,BMAP_SATELLITE_MAP]
        }));
       //全景地图
        var stCtrl = new BMap.PanoramaControl(); //构造全景控件
        stCtrl.setOffset(new BMap.Size(140,5));
        map.addControl(stCtrl);//添加全景控件
        map.enableScrollWheelZoom();   //启用滚轮放大缩小,默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用

        //加载完地图事件
        map.addEventListener("tilesloaded",function(){
            addLable();
            //addControl();
        });

        //添加自定义控件
        function addControl(){
            var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});   //设置版权控件位置
            map.addControl(cr); //添加版权控件
            var bs = map.getBounds();   //返回地图可视区域
            // cr.addCopyright({id: 1, content:
            //        '<span _cid="1"style="display: inline;"><div style="font-size:12px;margin:20px;padding:10px;">状态说明:' +
            //        '<span style="12px;height:12px;display:inline-block;">' +
            //         '</span>压力<span style="12px;height:12px;display:inline-block;">' +
            //        '</span>流量<span style="12px;height:12px;display:inline-block;"></span>有报警</div></span>', bounds: bs});
            //Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数
        }
        //下面开始尝试数组(这是后台输出的数据,这里只能静态写一些做演示。
        function createInfoWindow(i){
            var iw = new BMap.InfoWindow("<b class='iw_poi_title' title=''" +1 + "'>" +1 + "</b><p style='padding-top:8px;’><hr></p><div class='iw_poi_content'>"+2+"</div>");
            return iw;
        }
        //初始化弹出框
        function   CustomContent(name,y,x,id,nameStr){

            // 复杂的自定义覆盖物
            function ComplexCustomOverlay(point, text, mouseoverText){
                this._point = point;
                this._text = text;
                this._overText = mouseoverText;
            }

            ComplexCustomOverlay.prototype = new BMap.Overlay();

            ComplexCustomOverlay.prototype.initialize = function(map) {
                this._map = map;
                var div = this._div = document.createElement("div");
                div.style.position = "absolute";
                div.style.width = "150px"
                div.style.background = "#FFFFFF";
                div.style.borderRadius = "4px";
                div.style.cursor = "pointer";
                div.style.height = "30px";
                div.style.lineHeight = "20px";
                div.style.whiteSpace = "nowrap";
                div.style.MozUserSelect = "none";
                div.style.fontSize = "13px"
                div.style.boxShadow = "1px 1px 1px #666";
                div.setAttribute("title", nameStr);

                var span = this._span = document.createElement("span");
                if (id == 1) {
                    span.style.background = "red";
                } else {
                    span.style.background = "#2196F3";
                }
                span.style.width = "60px";
                span.style.height = "30px";
                span.style.color = "#fff";
                span.style.float = "left";
                span.style.textAlign = "center";
                span.style.borderRadius = "4px 0 0 4px";
                span.style.lineHeight = "30px";
                div.appendChild(span);
                span.appendChild(document.createTextNode(this._text));
                var that = this;

                var arrow = this._arrow = document.createElement("span");
                arrow.style.borderLeft = "5px solid transparent";
                arrow.style.borderRight = "5px solid transparent";
                if (id == 1) {
                    arrow.style.borderTop = "9px solid red";
                } else {
                    arrow.style.borderTop = " 9px solid #2196F3";
                }
                arrow.style.display = "block";
                arrow.style.position = "absolute";
                arrow.style.top = "30px";
                arrow.style.left = "17px";
                div.appendChild(arrow);


                var imgDiv = this._imgDiv = document.createElement("div");
                imgDiv.style.float = "left";

                imgDiv.style.display = "inline-block";
                div.appendChild(imgDiv);

                var img1 = this.img1 = document.createElement("img");
                var img2 = this.img2 = document.createElement("img");
                var img3 = this.img3 = document.createElement("img");

                if (id == 1) {
                    img1.src = "img/gis/press.png";
                    img2.src = "img/gis/flow.png";
                    img3.src = "img/gis/alarm.png";
                    imgDiv.appendChild(img1);
                    imgDiv.appendChild(img2);
                    imgDiv.appendChild(img3);
                } else {
                    img1.src = "img/gis/press.png";
                    img2.src = "img/gis/flow.png";
                    imgDiv.appendChild(img1);
                    imgDiv.appendChild(img2);
                }

                div.onmouseover = function () {
                    this.style.backgroundColor = "gainsboro";
                    this.style.borderColor = "gainsboro";
                }

                div.onmouseout = function () {
                    this.style.backgroundColor = "#FFFFFF";
                    this.style.borderColor = "#FFFFFF";
                }

               ////div.onclick=function() {

               //}
                map.getPanes().labelPane.appendChild(div);
                return div;
            }

            ComplexCustomOverlay.prototype.draw = function(){
                var map = this._map;
                var pixel = map.pointToOverlayPixel(this._point);
                this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
                this._div.style.top  = pixel.y - 30 + "px";
            }

            ComplexCustomOverlay.prototype.addEventListener = function(event,fun){
                this._div['on'+event] = fun;
            }
            var marker = new ComplexCustomOverlay(new BMap.Point(y, x),name);

            return marker;
        }

        function addLable() {
            var strJson = [
                {
                    "id": 1,
                    "ymwId":"11111",
                    "name": "设备1..",
                    "nameStr": "设备1南京南京南京",
                    "y": 116.417854,
                    "x": 39.921988
                },
                {
                    "id": 2,
                    "ymwId":"22222",
                    "name": "设备2..",
                    "nameStr": "设备2南京南京南京",
                    "y": 116.406605,
                    "x": 39.921585
                },
                {
                    "id": 2,
                    "ymwId":"33333",
                    "name": "设备3..",
                    "nameStr": "设备3南京南京南京",
                    "y": 116.412222,
                    "x": 39.912345
                },
                {
                    "id": 2,
                    "ymwId": "55555",
                    "name": "设备5..",
                    "nameStr": "设备5南京南京南京",
                    "y": 106.698821,
                    "x": 29.599076
                },
                {
            
                    "id": 2,
                    "ymwId":"44444",
                    "name": "设备4..",
                    "nameStr": "设备4南京南京南京",
                    "y":106.688821,
                    "x": 29.539076
                }
            ];
            var markers = [];
            var pt = null;
            var marker;
            var opts = {
                200, // 信息窗口宽度
                height: 100, // 信息窗口高度
                title: "海底捞王府井店", // 信息窗口标题
                enableMessage: true, //设置允许信息窗发送短息
                message: "戳下面的链接看下地址喔~"
            };

            var poniters = [];
            var infos = [];

            for (var i = 0; i < strJson.length; i++) {
                marker=CustomContent(strJson[i].name,strJson[i].y,strJson[i].x,strJson[i].id,strJson[i].nameStr);
                pt = new BMap.Point(strJson[i].y, strJson[i].x);
                poniters[i]=pt;
                markers.push(marker);
                var point = new BMap.Point(strJson[i].y,strJson[i].x);
                map.addOverlay(marker);

                infos[i] = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", opts);
    //            var infoWindow = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
    //            marker.addEventListener("click", function () {
    //                map.openInfoWindow(infoWindow, point); //查看当前事件对象
    //            });
            }

            for (var j = 0; j < markers.length; j++) {
                (function () {
                    var index = j;
                    markers[index].addEventListener("click", function () {
                        map.openInfoWindow(infos[index], poniters[index]);
                            });
                })();
            };

    //        $.each(markers, function (k, v) {
    //            v.addEventListener("click", function () {
    //                map.openInfoWindow(infos[0], poniters[0]);
    //            });
    //        });

    //        markers[0].addEventListener("click", function () {
    //            alert(poniters[0]);
    //            map.openInfoWindow(infos[0], poniters[0]);
    //        });

    //        markers[1].addEventListener("click", function () {
    //            alert(poniters[1]);
    //            map.openInfoWindow(infos[1], poniters[1]);
    //        });
    //        markers[2].addEventListener("click", function () {
    //            alert(poniters[2]);
    //            map.openInfoWindow(infos[2], poniters[2]);
    //        });

    //        markers[3].addEventListener("click", function () {
    //            map.openInfoWindow(infos[3], poniters[3]);
    //        });
    //        markers[4].addEventListener("click", function () {
    //            map.openInfoWindow(infos[4], poniters[4]);
    //        });

    //        for (var j =0;j<markers.length;j++){
    //            var _iw = createInfoWindow(j);
    //            markers[j].addEventListener("click", function() {
    //                map.openInfoWindow(_iw); //查看当前事件对象
    //            });
    //        }

    //       var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
    //       markerClusterer.setGridSize(100);
    //       markerClusterer.setMaxZoom(15);
    //       markerClusterer.setStyles(myStyles);
        }

          function addLableClick(){

          }
    </script>

    </html>

  • 相关阅读:
    [kuangbin带你飞]专题十二 基础DP1 E
    hdu 1203 I NEED A OFFER! (01背包)
    hdu 2602 Bone Collector (01背包)
    hdu 4513 吉哥系列故事——完美队形II (manacher)
    hdu 2203 亲和串 (KMP)
    hdu 1686 Oulipo (KMP)
    hdu 1251 统计难题 (字典树)
    hdu 2846 Repository (字典树)
    hdu 1711 Number Sequence (KMP)
    poj 3461 Oulipo(KMP)
  • 原文地址:https://www.cnblogs.com/kunlunmountain/p/5775446.html
Copyright © 2011-2022 走看看