Amap_xyxyshow_vue-amap amap.polyeditor-优快云博客

本文链接：https://blog.youkuaiyun.com/longfeihufengyun/article/details/45043649

本文介绍了如何使用高德地图API实现折线图的添加、更新、隐藏、显示及删除等功能，并提供了具体的JavaScript代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>折线的使用（添加、更新、删除）</title>
<style type="text/css">
body{
margin:0;
height:80%;
width:80%;
position:absolute;
}
#mapContainer{
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
}

#tip{
position:absolute;
bottom:20px;
right:0;
height:80px;
font-size:12px;
}

#tip input[type='button']{
margin-top:10px;
height:28px;
line-height:28px;
outline:none;
text-align:center;
padding-left:5px;
padding-right:5px;
color:#FFF;
background-color:#0D9BF2;
border:0;
border-radius: 3px;
margin-top:5px;
margin-left:5px;
cursor:pointer;
margin-right:10px;
}
#me{
position:absolute;
bottom:60px;
left:30px;
height:40px;
font-size:92px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="tip">
<input type="button" value="添加线覆盖物" onClick="javascript:addLine()"/>
<input type="button" value="线覆盖物描边" onClick="javascript:addOutline()"/>
<input type="button" value="隐藏线覆盖物" onClick="javascript:polyline.hide()"/>
<input type="button" value="显示线覆盖物" onClick="javascript:polyline.show()"/>
<input type="button" value="更新线覆盖物" onClick="javascript:updateLine()"/>
<input type="button" value="删除线覆盖物" onClick="javascript:polyline.setMap(null)"/>
</div>
<div id="me">
<p>
<input type="text" id="inputtxt" value="输入经纬度 x,y,x,y">
</p>
</div>

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6008796583d301fddad769918953bf92"></script>
<script type="text/javascript">
var polyline;
//初始化地图对象，加载地图
var map = new AMap.Map("mapContainer",{
resizeEnable: true,
view: new AMap.View2D({
center:new AMap.LngLat(116.397428,39.90923),//地图中心点
zoom:13 //地图显示的缩放级别
})
});
//添加线覆盖物
function addLine() {
var str="";
var lineArr = new Array();//创建线覆盖物节点坐标数组
// alert("您刚输入的是："+ document.getElementById("inputtxt").value );

var list = document.getElementById("inputtxt").value.split(",");//[116.45468,39.86276,116.45871,39.866067,116.46068,39.868439,116.46102,39.871419];
for(var i=0; i<list.length; i++){

lineArr.push(new AMap.LngLat( list[i], list[++i] ) );
}

polyline = new AMap.Polyline({
path:lineArr, //设置线覆盖物路径
strokeColor:"#3366FF", //线颜色
strokeOpacity:1, //线透明度
strokeWeight:5, //线宽
strokeStyle:"solid", //线样式
strokeDasharray:[10,5] //补充线样式
});
polyline.setMap(map);
}

//更新线覆盖物，除此以外还可通过插件AMap.PolyEditor进行线覆盖物的更新，详情参看AMap.PolyEditor相关示例介绍
function updateLine() {
var lineArr2 = new Array(); //新线覆盖物节点坐标数组
lineArr2.push(new AMap.LngLat("116.368904","39.923423"));
lineArr2.push(new AMap.LngLat("116.382122","39.921176"));
lineArr2.push(new AMap.LngLat("116.387271","39.922501"));
lineArr2.push(new AMap.LngLat("116.398258","39.914600"));

//新线覆盖物属性
var polylineoptions = {
zIndex:10,
strokeStyle:"solid",
strokeColor:"#FF3300",
strokeOpacity:0.8,
strokeWeight:5,
isOutline:false,
path:lineArr2
};
polyline.setOptions(polylineoptions);
}

function addOutline(){
polyline.setOptions({
isOutline:true,
outlineColor:"#000066"
});
}
</script>
</body>
</html>