鱼C论坛

 找回密码
 立即注册
查看: 3781|回复: 0

[学习笔记] 将php数组转成json编码,然后通过eval函数,转成js数组

[复制链接]
发表于 2021-3-31 12:56:22 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 雪月圣雕 于 2021-3-31 12:59 编辑

这是一个地图应用代码的一部分
在这一部分当中,我所遇见的最难的地方在于:
将php数组转成json编码,然后通过eval函数,转成js数组
然后将数组中的坐标点集绘制成折线。
注意:注释部分是测试代码,以及数据库代码(还未建表)。
数据库代码才是要用的,目前执行的代码是为了测试数据库接通后的情况。
绘制折线部分已经完成,届时只需要删除测试代码,还原数据库代码即可。
下一步是:标点
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>Hello, World</title>
  7.         <style type="text/css">
  8.             html{height:100%}
  9.             body{height:100%;margin:0px;padding:0px}
  10.             #container{height:100%}
  11.         </style>
  12.         <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥">
  13.         </script>
  14.     </head>
  15.   
  16.     <body>
  17.         <div id="container"></div>
  18.         <!--初始化地图经纬度-->
  19.         <?php $longitude = 116.404;?>
  20.         <?php $latitude = 39.915;?>
  21.         <script type="text/javascript">
  22.             // 创建地图实例
  23.             var map = new BMapGL.Map("container");
  24.             //接收PHP传递的变量
  25.             //var longitude = parseFloat("<?php //echo $longitude;?>");
  26.             //var latitude = parseFloat("<?php //echo $latitude;?>");
  27.             var lng = <?php echo $longitude;?>;
  28.             var lat = <?php echo $latitude; ?>;
  29.             // 创建点坐标
  30.             var point = new BMapGL.Point(lng, lat);
  31.             // 初始化地图,设置中心点坐标和地图级别
  32.             map.centerAndZoom(point, 15);
  33.             //设置鼠标滚轮缩放
  34.             map.enableScrollWheelZoom(true);
  35.             //设置缩放角度
  36.             map.setHeading(64.5);   //设置地图旋转角度
  37.             map.setTilt(73);       //设置地图的倾斜角度
  38.             //添加控件
  39.             var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  40.             map.addControl(scaleCtrl);
  41.             var opts = {
  42.                 anchor:BMAP_ANCHOR_TOP_RIGHT
  43.             }
  44.             var zoomCtrl = new BMapGL.ZoomControl(opts);  // 添加缩放控件
  45.             map.addControl(zoomCtrl);

  46.             //添加折线
  47.             
  48.             <?php
  49.             /*
  50.             //添加公共文件
  51.             //include_once 'mysql_public.php';
  52.             //获取所有的管道信息
  53.             //$sql = 'select * from xxx';
  54.             //获取结果集
  55.             //$res = myerror($sql);
  56.             //获取结果集数据条数:多少行记录
  57.             $rows =  mysqli_num_rows($res);
  58.             //保存取出的记录:
  59.             //$point = array();
  60.             //利用while获取,每次取到数据之后判断保存数据的结果,只要结果不为false,那么一直取
  61.             while($row = mysqli_fetch_assoc($res))
  62.             {
  63.                 $point[] = $row;    //于是point成为二维数组
  64.             }
  65.             */
  66.             ?>
  67.             <?php
  68.                 $points = array(
  69.                     array('lng'=>116.399, 'lat'=>39.910),
  70.                     array('lng'=>116.405, 'lat'=>39.920),
  71.                     array('lng'=>116.425, 'lat'=>39.900),
  72.                 );
  73.                 $rows = 3;
  74.                 //将坐标集转换为json格式,为js的接收做准备
  75.                 $jsonstr = json_encode($points);
  76.             ?>
  77.             //在JavaScript中接收PHP中的变量值
  78.             var json=<?=$jsonstr?>;
  79.             var rows = <?=$rows ?>;

  80.             //JavaScript获取PHP数组:
  81.             //将php数组转成json编码,然后通过eval函数,转成js数组
  82.             var points = eval(json);
  83.             var polylinePointsArray = [];
  84.             for(var index = 0; index < rows; index++)
  85.             {
  86.                 var x = points[index]['lng'] + 0.000;
  87.                 var y = points[index]['lat'] + 0.000;
  88.                 polylinePointsArray[index] = new BMapGL.Point(x,y);
  89.             }
  90.             //polylinePointsArray[0] = new BMapGL.Point(116.399, 39.910);
  91.             //polylinePointsArray[1] = new BMapGL.Point(116.405, 39.920);
  92.             //polylinePointsArray[2] = new BMapGL.Point(116.425, 39.900);
  93.             
  94.             //源代码中各个坐标点是存在一个中括号内,表示所有坐标点存在于一个数组当中。
  95.             //现已将坐标点存入数组,所以没有必要再加中括号了。
  96.             var polyline = new BMapGL.Polyline(//[
  97.                 //new BMapGL.Point(116.399, 39.910),
  98.                 //new BMapGL.Point(116.405, 39.920),
  99.                 //new BMapGL.Point(116.425, 39.900),
  100.             //]
  101.             polylinePointsArray, {strokeColor:"blue", strokeWeight:8, strokeOpacity:0.5});   //创建折线
  102.             map.addOverlay(polyline);          //增加折线
  103.             
  104.         </script>
  105.     </body>
  106. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-21 06:16

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表