信息窗口

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

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

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

x

这个信息窗口与我预期不符。
我本打算令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[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(var j = 0; j < riskRows; j++)
{
//获取第i条风险记录的起始与结束桩序号
var start = riskPoints[j]['start'];
var end = riskPoints[j]['end'];
var type = riskPoints[j]['type'];
//进入内层循环（循环次数为结束桩序号-起始桩序号）,将各个线桩的坐标点集存入风险数组
for(var i = 0; i <=end - start; i++)
{
//例：数据库的第二条数据，在数组中应该下标为1.
var x = points[i+start]['lng']+0.000;
var y = points[i+start]['lat']+0.000;
polylinePointsArrayRisk[i] = 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[0],myIcon_risk);
//每次执行完成一次循环必须置空，以防下一次循环时被上一次循环的数据影响
polylinePointsArrayRisk.splice(0,polylinePointsArrayRisk.length);
}
//添加标注点
//本代码将用于添加场站与阀室的标记
for(var index = 0; index < rows; index++)
{
if(points[index]['type']=="转角桩")
{
//自定义图标
var myIcon = new BMapGL.Icon("../img/risk_red.png", new BMapGL.Size(23, 25),{
//图标定位
offset: new BMapGL.Size(10, 25)
});
//添加标记与监听事件
//overlayMarker(polylinePointsArray[index],myIcon);
}
else if(points[index]['type']=="交叉桩")
{
//自定义图标
var myIcon = new BMapGL.Icon("../img/risk_yellow.png", new BMapGL.Size(23, 25),{
//图标定位
offset: new BMapGL.Size(10, 25)
});
//添加标记与监听事件
//overlayMarker(polylinePointsArray[index],myIcon);
}
}
//添加标记与监听事件
function overlayMarker(point,MyIcon)
{
var marker = new BMapGL.Marker(point,{icon: MyIcon});
map.addOverlay(marker);
//为marker添加title，方便以后索引
marker.setTitle(points[index]['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[start]['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[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(var j = 0; j < riskRows; j++)
{
//获取第i条风险记录的起始与结束桩序号
var start = riskPoints[j]['start'];
var end = riskPoints[j]['end'];
var type = riskPoints[j]['type'];
//进入内层循环（循环次数为结束桩序号-起始桩序号）,将各个线桩的坐标点集存入风险数组
for(var i = 0; i <=end - start; i++)
{
//例：数据库的第二条数据，在数组中应该下标为1.
var x = points[i+start]['lng']+0.000;
var y = points[i+start]['lat']+0.000;
polylinePointsArrayRisk[i] = 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[0],myIcon_risk);
//每次执行完成一次循环必须置空，以防下一次循环时被上一次循环的数据影响
polylinePointsArrayRisk.splice(0,polylinePointsArrayRisk.length);
}
//添加标注点
//本代码将用于添加场站与阀室的标记
for(var index = 0; index < rows; index++)
{
if(points[index]['type']=="阀室")
{
//自定义图标
var myIcon = new BMapGL.Icon("../img/阀门_1.png", new BMapGL.Size(23, 25),{
//图标定位
offset: new BMapGL.Size(10, 11)
});
//添加标记与监听事件
overlayMarker(polylinePointsArray[index],myIcon);
}
else if(points[index]['type']=="场站")
{
//自定义图标
var myIcon = new BMapGL.Icon("../img/场站.png", new BMapGL.Size(23, 25),{
//图标定位
offset: new BMapGL.Size(10, 25)
});
//添加标记与监听事件
overlayMarker(polylinePointsArray[index],myIcon);
}
}
//添加标记与监听事件
function overlayMarker(point,MyIcon)
{
var marker = new BMapGL.Marker(point,{icon: MyIcon});
map.addOverlay(marker);
//为marker添加title，方便以后索引
marker.setTitle(points[index]['name']);
//添加监听事件
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : points[index]['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[start]['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>

复制代码

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 信息窗口

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

浏览过的版块