【百度地图API】自定义可编辑的交通路线
任務描述：
我想自己繪制一條從地鐵站出口到天安門的道路，而且還需要根據我的喜好來改變這條路線。
如何實現：
鼠標左擊地圖，繪制路線；雙擊后，繪制結束；繪制結束后，路線可編輯。
TIPS:
API1.1以后，可以使用enableEditing()來開啟折線可編輯功能。
圖示：
運行代碼，請點擊這里。
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="百度地圖,百度地圖API，百度地圖自定義工具，百度地圖所見即所得工具" />
<meta name="description" content="百度地圖API自定義地圖，幫助用戶在可視化操作下生成百度地圖" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定義可編輯路線</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true">
</script>
</head>
<body>
<div id="container">
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 18);
var e1,e2;
var p = []; //用來存儲折線的點
var polyline;
var doneDraw = 0; //判斷是否繪制折線結束
map.addEventListener("click",function(e1){ //當鼠標單擊時
if(doneDraw == 0){ //判斷是否繪制曲線完畢
p.push(new BMap.Point(e1.point.lng,e1.point.lat)) //存儲曲線上每個點的經緯度
if(polyline){polyline.setPoints(p);} //如果曲線存在，則獲取折線上的點
else{polyline = new BMap.Polyline(p);} //如果折線不存在，就增加此點
if(p.length<2){return ;} //當折線上的點只有一個時，不繪制
map.addOverlay(polyline); //繪制曲線
}
});
map.addEventListener("dblclick",function(e2){ //當鼠標雙擊時：結束繪制，并可以編輯曲線
alert("繪制完成");
doneDraw = 10;
polyline.enableEditing();
});
</script>
</html>
總結
以上是生活随笔為你收集整理的【百度地图API】自定义可编辑的交通路线的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SAP Spartacus里的produ
- 下一篇： 超图卷积网络(HyperGCN: A N