【百度地图API】自行获取区域经纬度的工具
生活随笔
收集整理的這篇文章主要介紹了
【百度地图API】自行获取区域经纬度的工具
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
原文:【百度地圖API】自行獲取區域經緯度的工具
<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>
摘要：上一章教大家如何建立自己的行政區域地圖。這次為大家提供一個，可視化選擇區域，并且能自動生成經緯度代碼的工具。工具的源代碼完全公開，并且做了詳盡的注釋。可以單純做為一個工具，也可做為百度地圖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>
總結
以上是生活随笔為你收集整理的【百度地图API】自行获取区域经纬度的工具的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用rsync如何同步单个文件
- 下一篇： 【openSUSE】软件源和软件搜索