|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 雪月圣雕 于 2021-4-1 10:04 编辑
承接上一篇php转json的帖子。
这一部分比较简单:由于在之前已经获取了“记录集”:points,又获取了“坐标点集”:polylinePointsArray。
因此,添加标记只需要对polylinePointsArray(坐标点集)进行循环遍历即可。如果需要对每一个标注设置监听事件,那么就需要在循环内部添加监听事件。
本设计计划对不同类型的“坐标点集”创建不同的标注(不是每个都有标注)。所以我还需要用到points(记录集),在循环中添加代码进行判定该记录的类型,从而显示不同的标注(该部分代码还未做出)。
标注代码详见:第99行。
本代码的基本逻辑:
1.初始化地图
2.1 连接数据库(链接代码写在另一个文件当中,方便引用)
2.2 解析结果集 (生成$points“php记录集”)
3.1 php记录集转JavaScript记录集
3.2 生成坐标点集
4.1 添加折线
4.2 添加标注
注:由于尚未建表,所以数据方面是写在代码里面的三条记录(用二维数组存储$points)。
本程序设计将PHP作为后端代码
- <!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 = 116.404;?>
- <?php $latitude = 39.915;?>
- <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);
- //添加折线
-
- <?php
- /*
- //添加公共文件
- //include_once 'mysql_public.php';
- //获取所有的管道信息
- //$sql = 'select * from xxx';
- //获取结果集
- //$res = myerror($sql);
- //获取结果集数据条数:多少行记录
- $rows = mysqli_num_rows($res);
- //保存取出的记录:
- //$point = array();
- //利用while获取,每次取到数据之后判断保存数据的结果,只要结果不为false,那么一直取
- while($row = mysqli_fetch_assoc($res))
- {
- $point[] = $row; //于是point成为二维数组
- }
- */
- ?>
- <?php
- $points = array(
- array('lng'=>116.399, 'lat'=>39.910, 'name'=>"线桩1", 'id'=>1),
- array('lng'=>116.405, 'lat'=>39.920, 'name'=>"线桩2", 'id'=>2),
- array('lng'=>116.425, 'lat'=>39.900, 'name'=>"线桩3", 'id'=>3),
- );
- $rows = 3;
- //将坐标集转换为json格式,为js的接收做准备
- $jsonstr = json_encode($points);
- ?>
- //在JavaScript中接收PHP中的变量值
- var json = <?=$jsonstr?>;
- var rows = <?=$rows ?>;
- //JavaScript获取PHP数组:
- //将php数组转成json编码,然后通过eval函数,转成js数组
- var points = eval(json);
- //准备一个数组存放坐标点集
- var polylinePointsArray = [];
- for(var index = 0; index < rows; index++)
- {
- var x = points[index]['lng'] + 0.000;
- var y = points[index]['lat'] + 0.000;
- polylinePointsArray[index] = new BMapGL.Point(x,y);
- }
-
- //源代码中各个坐标点是存在一个中括号内,表示所有坐标点存在于一个数组当中。
- //现已将坐标点存入数组,所以没有必要再加中括号了。
- var polyline = new BMapGL.Polyline(polylinePointsArray, {strokeColor:"blue", strokeWeight:8, strokeOpacity:0.5}); //创建折线
- map.addOverlay(polyline); //增加折线
- //添加标注点
- for(index = 0; index < rows; index++)
- {
- var marker = new BMapGL.Marker(polylinePointsArray[index]);
- map.addOverlay(marker);
- //为marker添加title,方便以后索引
- marker.setTitle(points[index]['id']);
- //添加监听事件
- marker.addEventListener('click', overlayStyle);
- }
- //获取覆盖物属性
- function overlayStyle(e)
- {
- var p = e.target;
- alert(p.getTitle());
- }
- </script>
- </body>
- </html>
复制代码 |
|