|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 雪月圣雕 于 2021-3-31 12:59 编辑
这是一个地图应用代码的一部分
在这一部分当中,我所遇见的最难的地方在于:
将php数组转成json编码,然后通过eval函数,转成js数组
然后将数组中的坐标点集绘制成折线。
注意:注释部分是测试代码,以及数据库代码(还未建表)。
数据库代码才是要用的,目前执行的代码是为了测试数据库接通后的情况。
绘制折线部分已经完成,届时只需要删除测试代码,还原数据库代码即可。
下一步是:标点
- <!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=你的密钥">
- </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 longitude = parseFloat("<?php //echo $longitude;?>");
- //var latitude = parseFloat("<?php //echo $latitude;?>");
- 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),
- array('lng'=>116.405, 'lat'=>39.920),
- array('lng'=>116.425, 'lat'=>39.900),
- );
- $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);
- }
- //polylinePointsArray[0] = new BMapGL.Point(116.399, 39.910);
- //polylinePointsArray[1] = new BMapGL.Point(116.405, 39.920);
- //polylinePointsArray[2] = new BMapGL.Point(116.425, 39.900);
-
- //源代码中各个坐标点是存在一个中括号内,表示所有坐标点存在于一个数组当中。
- //现已将坐标点存入数组,所以没有必要再加中括号了。
- var polyline = new BMapGL.Polyline(//[
- //new BMapGL.Point(116.399, 39.910),
- //new BMapGL.Point(116.405, 39.920),
- //new BMapGL.Point(116.425, 39.900),
- //]
- polylinePointsArray, {strokeColor:"blue", strokeWeight:8, strokeOpacity:0.5}); //创建折线
- map.addOverlay(polyline); //增加折线
-
- </script>
- </body>
- </html>
复制代码 |
|