雪月圣雕 发表于 2021-4-6 09:07:13

信息窗口

这个信息窗口与我预期不符。
我本打算令polyline折线显示信息窗口,但是点击事件却没有反应,怎么也弄不明白。
主要是openInfoWindow需要一个point,而polylines对象中包含多个point,所以无法显示(我猜的)。
于是我改成了对每一个风险区域,去头一个线桩作为标记,用于显示风险信息。
<!DOCTYPE html>
<html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Hello, World</title>
      <style type="text/css">
            html{height:100%}
            body{height:100%;margin:0px;padding:0px}
            #container{height:100%}
      </style>
      <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=yourkey">
      </script>
    </head>

    <body>
      <div id="container"></div>
      <!--初始化地图经纬度-->
      <?php $longitude = ;?>
      <?php $latitude = ;?>
      <script type="text/javascript">
            // 创建地图实例
            var map = new BMapGL.Map("container");
            //接收PHP传递的变量
            var lng = <?php echo $longitude;?>;
            var lat = <?php echo $latitude; ?>;
            // 创建点坐标
            var point = new BMapGL.Point(lng, lat);
            // 初始化地图,设置中心点坐标和地图级别
            map.centerAndZoom(point, 15);
            //设置鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
            //设置缩放角度
            map.setHeading(64.5);   //设置地图旋转角度
            map.setTilt(73);       //设置地图的倾斜角度
            //添加控件
            var scaleCtrl = new BMapGL.ScaleControl();// 添加比例尺控件
            map.addControl(scaleCtrl);
            var opts = {
                anchor:BMAP_ANCHOR_TOP_RIGHT
            }
            var zoomCtrl = new BMapGL.ZoomControl(opts);// 添加缩放控件
            map.addControl(zoomCtrl);

            //执行SQL语句,获取结果集。
            //解析结果集,获取记录集。
            <?php
            //添加公共文件
            include_once 'mysql_public.php';
            //获取前100条管道信息
            $sql = "SELECT * FROM `lines` LIMIT 100";
            //获取结果集
            $res = myerror($sql);
            //获取结果集数据条数:多少行记录
            $rows =mysqli_num_rows($res);
            //保存取出的记录:
            $points = array();
            //利用while获取,每次取到数据之后判断保存数据的结果,只要结果不为false,那么一直取
            while($row = mysqli_fetch_assoc($res))
            {
                $points[] = $row;    //于是point成为二维数组
            }
            //将坐标集转换为json格式,为js的接收做准备
            $jsonstr = json_encode($points);
            ?>

            //在JavaScript中接收PHP中的变量值
            var json = <?=$jsonstr?>;
            var rows = <?=$rows?>;
            //JavaScript获取PHP数组:
            //将php数组转成json编码,然后通过eval函数,转成js数组
            var points = eval(json);

            //测试
            <?php
                $risk_points = array(
                  array('start'=>2, 'end'=>8, 'type'=>1),
                  array('start'=>10, 'end'=>14, 'type'=>2)
                );
                //将坐标集转换为json格式,为js的接收做准备
                $jsonstr2 = json_encode($risk_points);
                $riskRows = 2;
            ?>
            var json2 = <?=$jsonstr2 ?>;
            var riskRows = <?=$riskRows?>;
            var riskPoints = eval(json2);
            
            //获取坐标点集
            //准备一个数组存放坐标点集,再准备一个数组存放风险点集。
            var polylinePointsArray = [];
            var polylinePointsArrayRisk = [];
            for(var index = 0; index < rows; index++)
            {
                var x = points['lng'] + 0.000;
                var y = points['lat'] + 0.000;
                polylinePointsArray = new BMapGL.Point(x,y);
            }

            //添加折线
            //源代码中各个坐标点是存在一个中括号内,表示所有坐标点存在于一个数组当中。
            //现已将坐标点存入数组,所以没有必要再加中括号了。
            var polyline = new BMapGL.Polyline(polylinePointsArray, {strokeColor:"blue", strokeWeight:8, strokeOpacity:0.5});   //创建折线
            map.addOverlay(polyline);          //增加折线

            //再次添加折线
            for(var j = 0; j < riskRows; j++)
            {
                //获取第i条风险记录的起始与结束桩序号
                var start = riskPoints['start'];
                var end = riskPoints['end'];
                var type = riskPoints['type'];
                //进入内层循环(循环次数为结束桩序号-起始桩序号),将各个线桩的坐标点集存入风险数组
                for(var i = 0; i <=end - start; i++)
                {
                  //例:数据库的第二条数据,在数组中应该下标为1.
                  var x = points['lng']+0.000;
                  var y = points['lat']+0.000;
                  polylinePointsArrayRisk = new BMapGL.Point(x,y);
                }

                //进入外循环,添加折线(根据风险类型选择折线颜色)
                if(type == 1)
                {
                  //"#FFFF00":黄色
                  //自定义图标
                  var myIcon_risk = new BMapGL.Icon("../img/risk_yellow.png", new BMapGL.Size(23, 25),{
                        //图标定位
                        offset: new BMapGL.Size(10, 25)
                  });
                  var polylines = new BMapGL.Polyline(polylinePointsArrayRisk, {strokeColor:"#FFFF00", strokeWeight:8, strokeOpacity:0.5});
                }
                else if(type == 2)
                {
                  //自定义图标
                  var myIcon_risk = new BMapGL.Icon("../img/risk_red.png", new BMapGL.Size(23, 25),{
                        //图标定位
                        offset: new BMapGL.Size(10, 25)
                  });
                  var polylines = new BMapGL.Polyline(polylinePointsArrayRisk, {strokeColor:"red", strokeWeight:8, strokeOpacity:0.5});
                }
               
                //添加风险折线
                map.addOverlay(polylines);
                //添加风险起始桩标记
                overlayMarkerRisk(polylinePointsArrayRisk,myIcon_risk);
                //每次执行完成一次循环必须置空,以防下一次循环时被上一次循环的数据影响
                polylinePointsArrayRisk.splice(0,polylinePointsArrayRisk.length);
            }

            //添加标注点
            //本代码将用于添加场站与阀室的标记
            for(var index = 0; index < rows; index++)
            {
                if(points['type']=="转角桩")
                {
                  //自定义图标
                  var myIcon = new BMapGL.Icon("../img/risk_red.png", new BMapGL.Size(23, 25),{
                        //图标定位
                        offset: new BMapGL.Size(10, 25)
                  });
                  //添加标记与监听事件
                  //overlayMarker(polylinePointsArray,myIcon);
                }
                else if(points['type']=="交叉桩")
                {
                  //自定义图标
                  var myIcon = new BMapGL.Icon("../img/risk_yellow.png", new BMapGL.Size(23, 25),{
                        //图标定位
                        offset: new BMapGL.Size(10, 25)
                  });
                  //添加标记与监听事件
                  //overlayMarker(polylinePointsArray,myIcon);
                }
            }

            //添加标记与监听事件
            function overlayMarker(point,MyIcon)
            {
                var marker = new BMapGL.Marker(point,{icon: MyIcon});
                map.addOverlay(marker);
                //为marker添加title,方便以后索引
                marker.setTitle(points['name']);
                //添加监听事件
                var opts = {
                  width : 200,   // 信息窗口宽度
                  height: 100,   // 信息窗口高度
                  title : "故宫博物院" , // 信息窗口标题
                  message:"这里是故宫"
                }
                var infoWindow = new BMapGL.InfoWindow(marker.getTitle(), opts);// 创建信息窗口对象
                marker.addEventListener('click', function(){
                  map.openInfoWindow(infoWindow, point); //开启信息窗口
                });
            }

            //添加风险标记与监听事件
            //本代码将用于添加风险起始桩的标记
            function overlayMarkerRisk(point,MyIcon)
            {
                var marker = new BMapGL.Marker(point,{icon: MyIcon});
                map.addOverlay(marker);
                //为marker添加title,方便以后索引
                marker.setTitle(points['name']);
                //添加监听事件
                var opts = {
                  width : 200,   // 信息窗口宽度
                  height: 100,   // 信息窗口高度
                  title : "风险起始桩" , // 信息窗口标题
                  message:"这里是故宫"
                }
                var infoWindow = new BMapGL.InfoWindow(marker.getTitle(), opts);// 创建信息窗口对象
                marker.addEventListener('click', function(){
                  map.openInfoWindow(infoWindow, point); //开启信息窗口
                });
            }

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

雪月圣雕 发表于 2021-4-18 08:20:17

更新阀室与场站
<!DOCTYPE html>
<html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Hello, World</title>
      <style type="text/css">
            html{height:100%}
            body{height:100%;margin:0px;padding:0px}
            #container{height:100%}
      </style>
      <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=yourkey">
      </script>
    </head>

    <body>
      <div id="container"></div>
      <!--初始化地图经纬度-->
      <!-- 以风险管线的第一个线桩为定位点 -->
      <?php $longitude = ;?>
      <?php $latitude = ;?>
      <script type="text/javascript">
            // 创建地图实例
            var map = new BMapGL.Map("container");
            //接收PHP传递的变量
            var lng = <?php echo $longitude;?>;
            var lat = <?php echo $latitude; ?>;
            // 创建点坐标
            var point = new BMapGL.Point(lng, lat);
            // 初始化地图,设置中心点坐标和地图级别
            map.centerAndZoom(point, 15);
            //设置鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
            //设置缩放角度
            map.setHeading(64.5);   //设置地图旋转角度
            map.setTilt(73);       //设置地图的倾斜角度
            //添加控件
            var scaleCtrl = new BMapGL.ScaleControl();// 添加比例尺控件
            map.addControl(scaleCtrl);
            var opts = {
                anchor:BMAP_ANCHOR_TOP_RIGHT
            }
            var zoomCtrl = new BMapGL.ZoomControl(opts);// 添加缩放控件
            map.addControl(zoomCtrl);

            //执行SQL语句,获取结果集。
            //解析结果集,获取记录集。
            <?php
            //添加公共文件
            include_once 'mysql_public.php';
            //获取前100条管道信息
            $sql = "SELECT * FROM `lines` LIMIT 100";
            //获取结果集
            $res = myerror($sql);
            //获取结果集数据条数:多少行记录
            $rows =mysqli_num_rows($res);
            //保存取出的记录:
            $points = array();
            //利用while获取,每次取到数据之后判断保存数据的结果,只要结果不为false,那么一直取
            while($row = mysqli_fetch_assoc($res))
            {
                $points[] = $row;    //于是points成为二维数组
            }
            //将坐标集转换为json格式,为js的接收做准备
            $jsonstr = json_encode($points);
            ?>

            //在JavaScript中接收PHP中的变量值
            var json = <?=$jsonstr?>;
            var rows = <?=$rows?>;
            //JavaScript获取PHP数组:
            //将php数组转成json编码,然后通过eval函数,转成js数组
            var points = eval(json);

            //测试
            <?php
                $risk_points = array(
                  array('start'=>2, 'end'=>8, 'type'=>1),
                  array('start'=>10, 'end'=>14, 'type'=>2)
                );
                //将坐标集转换为json格式,为js的接收做准备
                $jsonstr2 = json_encode($risk_points);
                $riskRows = 2;
            ?>
            var json2 = <?=$jsonstr2 ?>;
            var riskRows = <?=$riskRows?>;
            var riskPoints = eval(json2);
            
            //获取坐标点集
            //准备一个数组存放坐标点集,再准备一个数组存放风险点集。
            var polylinePointsArray = [];
            var polylinePointsArrayRisk = [];
            for(var index = 0; index < rows; index++)
            {
                var x = points['lng'] + 0.000;
                var y = points['lat'] + 0.000;
                polylinePointsArray = new BMapGL.Point(x,y);
            }

            //添加折线
            //源代码中各个坐标点是存在一个中括号内,表示所有坐标点存在于一个数组当中。
            //现已将坐标点存入数组,所以没有必要再加中括号了。
            var polyline = new BMapGL.Polyline(polylinePointsArray, {strokeColor:"blue", strokeWeight:8, strokeOpacity:0.5});   //创建折线
            map.addOverlay(polyline);          //增加折线

            //再次添加折线
            for(var j = 0; j < riskRows; j++)
            {
                //获取第i条风险记录的起始与结束桩序号
                var start = riskPoints['start'];
                var end = riskPoints['end'];
                var type = riskPoints['type'];
                //进入内层循环(循环次数为结束桩序号-起始桩序号),将各个线桩的坐标点集存入风险数组
                for(var i = 0; i <=end - start; i++)
                {
                  //例:数据库的第二条数据,在数组中应该下标为1.
                  var x = points['lng']+0.000;
                  var y = points['lat']+0.000;
                  polylinePointsArrayRisk = new BMapGL.Point(x,y);
                }

                //进入外循环,添加折线(根据风险类型选择折线颜色)
                if(type == 1)
                {
                  //"#FFFF00":黄色
                  //自定义图标
                  var myIcon_risk = new BMapGL.Icon("../img/risk_yellow.png", new BMapGL.Size(23, 25),{
                        //图标定位
                        offset: new BMapGL.Size(10, 25)
                  });
                  var polylines = new BMapGL.Polyline(polylinePointsArrayRisk, {strokeColor:"#FFFF00", strokeWeight:8, strokeOpacity:0.5});
                }
                else if(type == 2)
                {
                  //自定义图标
                  var myIcon_risk = new BMapGL.Icon("../img/risk_red.png", new BMapGL.Size(23, 25),{
                        //图标定位
                        offset: new BMapGL.Size(10, 25)
                  });
                  var polylines = new BMapGL.Polyline(polylinePointsArrayRisk, {strokeColor:"red", strokeWeight:8, strokeOpacity:0.5});
                }
                //添加风险折线
                //addClickHandle(polylines);
                map.addOverlay(polylines);
   
                //添加风险起始桩标记
                overlayMarkerRisk(polylinePointsArrayRisk,myIcon_risk);
                //每次执行完成一次循环必须置空,以防下一次循环时被上一次循环的数据影响
                polylinePointsArrayRisk.splice(0,polylinePointsArrayRisk.length);
            }

            //添加标注点
            //本代码将用于添加场站与阀室的标记
            for(var index = 0; index < rows; index++)
            {
                if(points['type']=="阀室")
                {
                  //自定义图标
                  var myIcon = new BMapGL.Icon("../img/阀门_1.png", new BMapGL.Size(23, 25),{
                        //图标定位
                        offset: new BMapGL.Size(10, 11)
                  });
                  //添加标记与监听事件
                  overlayMarker(polylinePointsArray,myIcon);
                }
                else if(points['type']=="场站")
                {
                  //自定义图标
                  var myIcon = new BMapGL.Icon("../img/场站.png", new BMapGL.Size(23, 25),{
                        //图标定位
                        offset: new BMapGL.Size(10, 25)
                  });
                  //添加标记与监听事件
                  overlayMarker(polylinePointsArray,myIcon);
                }
            }

            //添加标记与监听事件
            function overlayMarker(point,MyIcon)
            {
                var marker = new BMapGL.Marker(point,{icon: MyIcon});
                map.addOverlay(marker);
                //为marker添加title,方便以后索引
                marker.setTitle(points['name']);
                //添加监听事件
                var opts = {
                  width : 200,   // 信息窗口宽度
                  height: 100,   // 信息窗口高度
                  title : points['type'] , // 信息窗口标题
                  message:"这里是故宫"
                }
                var infoWindow = new BMapGL.InfoWindow(marker.getTitle(), opts);// 创建信息窗口对象
                marker.addEventListener('click', function(){
                  map.openInfoWindow(infoWindow, point); //开启信息窗口
                });
            }

            //添加风险标记与监听事件
            //本代码将用于添加风险起始桩的标记
            function overlayMarkerRisk(point,MyIcon)
            {
                var marker = new BMapGL.Marker(point,{icon: MyIcon});
                map.addOverlay(marker);
                //为marker添加title,方便以后索引
                marker.setTitle(points['name']);
                //添加监听事件
                var opts = {
                  width : 200,   // 信息窗口宽度
                  height: 100,   // 信息窗口高度
                  title : "风险起始桩" , // 信息窗口标题
                  message:"这里是故宫"
                }
                var infoWindow = new BMapGL.InfoWindow(marker.getTitle(), opts);// 创建信息窗口对象
                marker.addEventListener('click', function(){
                  map.openInfoWindow(infoWindow, point); //开启信息窗口
                });
            }
      </script>
    </body>
</html>
页: [1]
查看完整版本: 信息窗口