马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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>
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2021-4-1 10:03:40
置顶卡
千斤顶
显身卡