天地图添加覆盖线，并且点击出发弹窗事件

最新推荐文章于 2024-08-20 10:49:35 发布

是锦

最新推荐文章于 2024-08-20 10:49:35 发布

阅读量312

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_45725784/article/details/134725007

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=秘钥" type="text/javascript"></script>
<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
<script src="http://t0.tianditu.gov.cn/vec_w/wmts?tk=秘钥" type="text/javascript"></script>
<script src="../14.5/static/js/jquery-3.6.4.min.js"></script>
</head>
<body style="background-color:#333333;"><div align="center" style="width:1920px;">
<div class="chart-container" id="791e3b8d32c34ee389ad805fcbd17f21" style="left:630px;top:120px;width:660px;height:606px;position:absolute"></div>
<script>
              var bmap = new T.Map('791e3b8d32c34ee389ad805fcbd17f21');
              var point = new T.LngLat(129.798891, 42.999593);
              bmap.centerAndZoom(point, 10);
              bmap.enableScrollWheelZoom(true);


/******************标记线添加修改方法一开始***********************/
            bmap.clearOverLays();
            points = [];
            points.push(new T.LngLat(129.838169, 42.874174));
            points.push(new T.LngLat(129.826575, 42.875641));
            var line = new T.Polyline(points);
            line.setColor("blue");
            bmap.addOverLay(line);
            var markerInfoWin = new T.InfoWindow('桩号:K001+000~K001+218<br>PCI:44.89(差)<br>RQI:60.52(次)<br>PQI:51.14(差)', {title:'C001'});
            line.addEventListener("click", function () {
                line.openInfoWindow(markerInfoWin);
            });

/******************标记线添加修改方法一结束***********************/
	
/******************标记线添加修改方法二开始***********************/

//线的一下基本配置
  var lineconfig={
		color: "#FB0008",            //线的颜色
		weight: 5,               //线的宽度
		opacity: 0.5,             //线的透明度
		lineStyle:"solid"        //线的样式
	};

//创建点对象集合并创建几个点放进集合中
    var points = new Array();
    points[0]=new T.LngLat(129.826575, 42.875641);
    points[1]=new T.LngLat(129.824873, 42.876674);

    var polyline_2 = new T.Polyline(points,lineconfig);//创建线条的对象

  //向地图上添加线
 bmap.addOverLay(polyline_2);

 //注册点击事件
var markerInfoWin = new T.InfoWindow('桩号:K001+000~K001+218<br>PCI:44.89(差)<br>RQI:60.52(次)<br>PQI:51.14(差)', {title:'C001'});
            polyline_2.addEventListener("click", function () {
                polyline_2.openInfoWindow(markerInfoWin);
            });
/******************标记线添加修改方法二结束***********************/
</script>
</body>

</html>