【百度地圖API】自行獲取區域經緯度的工具


摘要:上一章教大家如何建立自己的行政區域地圖。這次為大家提供一個,可視化選擇區域,並且能自動生成經緯度代碼的工具。工具的源代碼完全公開,並且做了詳盡的注釋。可以單純做為一個工具,也可做為百度地圖API的學習案例。

 

工具說明:

1、開關可以控制,是否在地圖上建立折線覆蓋物

2、雙擊地圖,會建立多邊形覆蓋物

3、自動輸入的經緯度信息,最后一行不要復制。因為map的dblclcik事件,會先觸發兩次click,最后才是dblclick。

4、清除按鈕可以清除覆蓋物,清除經緯度數據,重新來一次

 

 

 

 

 

 

全部源代碼:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行政區域工具</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p><input id="startBtn" type="button" onclick="startTool();" value="開啟取點工具" /><input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p>
<div id="info"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 創建Map實例
map.centerAndZoom("北京", 11); // 初始化地圖,設置中心點坐標和地圖級別

var key = 1; //開關
var newpoint; //一個經緯度
var points = []; //數組,放經緯度信息
var polyline = new BMap.Polyline(); //折線覆蓋物

function startTool(){ //開關函數
if(key==1){
document.getElementById(
"startBtn").style.background = "green";
document.getElementById(
"startBtn").style.color = "white";
document.getElementById(
"startBtn").value = "開啟狀態";
key
=0;
}
else{
document.getElementById(
"startBtn").style.background = "red";
document.getElementById(
"startBtn").value = "關閉狀態";
key
=1;
}
}
map.addEventListener(
"click",function(e){ //單擊地圖,形成折線覆蓋物
newpoint = new BMap.Point(e.point.lng,e.point.lat);
if(key==0){
// if(points[points.length].lng==points[points.length-1].lng){alert(111);}
points.push(newpoint); //將新增的點放到數組中
polyline.setPath(points); //設置折線的點數組
map.addOverlay(polyline); //將折線添加到地圖上
document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),</br>"; //輸出數組里的經緯度
}
});
map.addEventListener(
"dblclick",function(e){ //雙擊地圖,形成多邊形覆蓋物
if(key==0){
map.disableDoubleClickZoom();
//關閉雙擊放大
var polygon = new BMap.Polygon(points);
map.addOverlay(polygon);
//將折線添加到地圖上
}
});
</script>

 

---------------------------------------------------------------------------------------------------------------------------------

即日起至2016/10/31止,凡注冊成為高德開發者的新用戶,即可獲贈1張阿里雲優惠券,可享受最低6折購買阿里雲產品。數量有限,發完即止。詳情點擊:http://lbsbbs.amap.com/forum.php?mod=viewthread&tid=20143

---------------------------------------------------------------------------------------------------------------------------------


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM