百度地圖API

時間 2019-11-19

標籤百度地圖 api 简体版

原文原文鏈接

本文我將從如何使用地圖API(本文以百度爲例，谷歌相似)開始，日後的擴展行的內容詳見後續文章。
1.打開連接http://developer.baidu.com/map/jshome.htm
這裏有不少DEMO，或者你直接百度搜索「百度地圖API」，第一個就是。進入後有不少方向供你選擇，因爲如今開源的地圖API都是JS腳本寫的，因此我上面的連接就只針對JAVASCRIPT進行介紹。
即便是編程菜鳥(像我這種),也知道當你在任何一個開發環境下寫代碼時，都須要加入頭文件，例如，你要在C++裏使用cout，cin呢就必需要加入include <io.stream>;與這種思惟相似，開發電子地圖系統也是同樣的。你想啊，百度地圖都是開發好的，人家能隨隨便便就把這東西直接給你嗎？搞笑呢麼。只可能給你一些接口讓你去開發。呢麼問題就是如何讓這些接口有意義呢？好比你如今想在地圖上定點一個位置，百度地圖裏有一個函數就是提供此功能的，setCenter(Point:String);呢麼你不管把這句話加在頁面的任何一個地方都不會起做用，由於頁面根本就不知道這是個什麼東西，這時就要加入API庫的連接：
   <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
這個連接就比如給setCenter(Point:String)加了一個頭文件。其實這很簡單，而我這麼介紹是由於我幾乎就沒學過什麼HTML,CSS,JS,WEB啊，基本都是靠本身的理解去現學現用的，就拿JS來講我都沒有任何基礎，直接拿其餘語言的語法去些的，遇到什麼問題就去搜JS的函數定義啊，什麼特殊的事件等等。因此原諒我這麼羅嗦的介紹，只爲給像我同樣的小白說的更清楚。下面解釋一下這個連接：
   api：該連接爲百度地圖api庫
   v=1.4：庫的版本爲1.4版本，是目前最高的
之前百度API開放的時候是須要註冊KEY的，如今就不須要，因此使用起來更簡單了。另外提一點，在參考百度的DEMO時要注意這個版本，如今好比V=1.2和V=1.4在有些功能上有些誤差，並且有的函數在某些版本里可能有，在高級版本里已經廢棄了。
2.以百度提供的DEMO爲例，入門介紹
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>百度地圖的Hello, World</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");            // 建立Map實例
var point = new BMap.Point(116.404, 39.915);    // 建立點座標
map.centerAndZoom(point,15);                     // 初始化地圖,設置中心點座標和地圖級別。
map.enableScrollWheelZoom();                            //啓用滾輪放大縮小
</script>
---------------------------------------------------------------------------
將上面的頁面複製下來，保存爲.html文件，而後運行該靜態頁面將會顯示一張任何功能都沒有，但卻和百度地圖同樣的頁面。
若不能顯示或者是出現亂碼，則用如下辦法解決：javascript

1.當你保存txt文件時採用默認編碼格式(ANSI),則在上述代碼中將編碼格式改成charset="gb2312";若還不能顯示，則查看是不你的瀏覽器的問題，在internet工具，選項裏找到「禁用腳本提示」，看是否打鉤了。php

2.保存txt文件時選擇編碼格式爲utf-8，則上面的代碼就能正常顯示(推薦此編碼，不解釋)。
css

接着上一篇，將上一篇代碼的js提取出來：
<script type="text/javascript">
var map = new BMap.Map("allmap");            // 建立Map實例
var point = new BMap.Point(116.404, 39.915);    // 建立點座標
map.centerAndZoom(point,15);                     // 初始化地圖,設置中心點座標和地圖級別。
map.enableScrollWheelZoom();                            //啓用滾輪放大縮小
</script>
這段js功能很簡單，就是初始化地圖而且定位。其中涉及了四個庫裏的函數：
1.Map(參數：HTML中的元素)
因此必需要有一個塊<div id="allmap"></div>，而且調用的就是以前定義好的三種樣式
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
2.Point(座標|字符串)
這個函數便可用座標初始化也可用字符串。
3.centerAndZoom(Point，Number)
這個函數是地圖的最基礎也是最重要的函數，是將定義好的點加載到地圖上進行定位，而且指明地圖放大級數。
4.enableScrollWheelZoom();
這個一看名字就知道是開啓滾動條，默認參數爲true。
之後修改百度的DEMO時只要在
<script type="text/javascript">
//do something
</script>
就好了，固然了，你要是有特殊的需求還須要另外定義元素或者全局變量等等，這個後面我會跟你們分享。上面的四個函數在百度的開源庫裏都能找到http://developer.baidu.com/map/reference/index.phptitle=Class:E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB，有詳細的介紹，我就不在這一一介紹了。可是必須說一點，也許是出於機密，百度提供的這個類庫有些籠統，好比有些類裏面方法的屬性根本就沒有說起，這個類庫的參考只能讓你有一些輪廓。因此，利用百度API進行二次開發有一個很龐大的工程就是篩選出你須要的功能函數，而且看不少DEMO來找出該函數的各類重載和用法。因此下一篇，我跟你們分享一下我本身總結的經常使用函數的屬性以及方法，會不少喔(絕對實用)。html

這一篇我將跟你們分享一下我本身在開發過程當中總結出的一些操做地圖的方法，屬性，及思路，但願可讓你們少走彎路。java

1.定位web

通常百度的示例DEMO裏開始初始化地圖時用的都是map.centerAndZoom（座標，放大級數）；其中座標能夠用點代替，也可用字符串代替，而放大級數必須是整數，好比：正則表達式

var p1=new BMap.Point(108.961605,34.238296);//西安座標算法

map.centerAndZoom(p1,15);//或者map.centerAndZoom("西安",15);sql

可是必需要注意一點，這個點絕對是要用百度的API去實例化，即必須用BMap.Point(經度，緯度)去創造一個點，我在這點上吃了不少苦，有一次直接創建了一個座標數組就在那讀，死活沒調通。數據庫

若是要從新定位，我建議你們不要在用centerAndZoom了，能夠這樣：

map.setCenter(「西安");

map.setZoom(15);

2.添加標註(Marker)

添加標註的最基本條件就是添加點座標，示例以下：

首先必需要加載地圖（全部的操做都是在這個的基礎上進行的）

var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(108.961605,34.238296), 14);
var marker1 = new BMap.Marker(new BMap.Point(108.961605,34.238296)); // 建立標註
map.addOverlay(marker1); // 將標註添加到地圖中

若要給標註添加信息框，則繼續下面的代碼：

var infoWindow1 = new BMap.InfoWindow("普通標註");
//給mark添加鼠標單擊事件
marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});

百度默認的標註是個紅色氣球，能夠給它換圖標：

var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("./png.gif", new BMap.Size(300,157));//本身要添加的路徑
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 建立標註
map.addOverlay(marker2); // 將標註添加到地圖中

最後爲信息框加入點擊鼠標事件：

var infoWindow2 = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈，你看見我啦！我可不常出現哦！</p><p style='font-size:14px;'>趕快查看源代碼，看看我是如何添加上來的！</p>");
marker2.addEventListener("click", function(){this.openInfoWindow(infoWindow2);});

3.畫線

下面是百度的一個小DEMO：

從以上代碼中能夠獲得兩個重要的信息：

(1) map.getDistance(點1，點2)；這個函數能夠很好的幫助咱們算兩點的距離，不用本身計算，很方便。

(2) Ployline函數能夠幫助咱們劃線，在這裏不難看出它須要的第一個參數是一個點數組，因此在實際項目中能夠將數據先放在數組裏，而後在傳數組名給它便可(注意必定要實例化，即BMap.Point());因此能夠利用它來畫矩形，多邊形等等。。

4.地址解析

5.鼠標實時獲取座標

function GetlngAndlat(e)
{if(e.point.lng!=null)
{
document.getElementById("mouselng").innerHTML=e.point.lng;
document.getElementById("mouselat").innerHTML=e.point.lat;
}
}

這些所有都是靜態頁面的腳本，爲了更好的實現，我選擇用WINFORM與其交互。

這一篇，記錄一下我調用的地圖API實現的功能。下面介紹的都是一些片斷的節選，不能直接複製就運行。在實現以前確定要加載地圖，先放一個webbroser控件，而後以下：

01.private void Form1_Load(object sender, EventArgs e)  
02.        {  
03.  
04.            string str_url = Application.StartupPath + "\\最終合併版本(昨晚修改).html";  
05.            Uri url = new Uri(str_url);  
06.            webBrowser1.Url = url;  
07.            webBrowser1.ObjectForScripting = this;  
08.                     
09.        }

而爲了能與JS交互，首先引入using System.Security.Permissions;，而後在namespace下必須加入兩行：

01.namespace WebBroser_Test_V1._0  
02.{  
03.    [PermissionSet(SecurityAction.Demand, Name = "FullTrust")]  
04.  
05.    [System.Runtime.InteropServices.ComVisibleAttribute(true)]  
06.  
07.  
08.    public partial class Form1 : Form  
09.    {  
10.               public Form1()  
11.        {  
12.            InitializeComponent();  
13.        }  
14.        private void Form1_Load(object sender, EventArgs e)  
15.        {  
16.  
17.            string str_url = Application.StartupPath + "\\最終合併版本(昨晚修改).html";  
18.            Uri url = new Uri(str_url);  
19.            webBrowser1.Url = url;  
20.            webBrowser1.ObjectForScripting = this;  
21.           // timer1.Enabled = true;            
22.        }  
23.}

有了上面的基礎，就能夠實現如下功能了。

1.鼠標放在屏幕上移動時，實時的顯示座標。

放入一個timer和一個StatusScrip：

01.private void timer1_Tick(object sender, EventArgs e)  
02.        {  
03.            try  
04.            {  
05.                string tag_lng = webBrowser1.Document.GetElementById("mouselng").InnerText;  
06.                string tag_lat = webBrowser1.Document.GetElementById("mouselat").InnerText;  
07.                double dou_lng, dou_lat;  
08.                if (double.TryParse(tag_lng, out dou_lng) && double.TryParse(tag_lat, out dou_lat))  
09.                {  
10.                    toolstatus_CurrentLocation.Text ="當前座標："+ dou_lng.ToString("F5") + "," + dou_lat.ToString("F5");  
11.                }  
12.            }  
13.            catch (Exception ee)  
14.            { MessageBox.Show(ee.Message); }  
15.            
16.        }

放入一個button命名及代碼以下：

01.private void btnGetLocation_Click(object sender, EventArgs e)  
02.       {  
03.           if (btnGetLocation.Text == "開啓實時座標")  
04.           {  
05.               timer1.Enabled = true;  
06.               btnGetLocation.Text = "關閉實時座標";  
07.           }  
08.           else  
09.           {  
10.               btnGetLocation.Text = "開啓實時座標";  
11.               timer1.Enabled = false;  
12.           }  
13.       }

JS腳本以下：

01.var map =new BMap.Map("allmap");  
02.var first_locate=new BMap.Point(108.953098,34.2778);  
03.map.centerAndZoom(first_locate,15);     
04.map.enableScrollWheelZoom(true);  
05.map.addEventListener("mousemove",GetlngAndlat);     
06.function GetlngAndlat(e)  
07.{if(e.point.lng!=null)  
08. {  
09.   
10. document.getElementById("mouselng").innerHTML=e.point.lng;  
11.  document.getElementById("mouselat").innerHTML=e.point.lat;  
12. }  
13.}

2.開啓測距工具（百度本身開發的）

拖一個按鈕：

01.//開啓測距工具按鈕   
02.        private void btnOpenDistance_Click(object sender, EventArgs e)  
03.        {  
04.            webBrowser1.Document.InvokeScript("openGetDistance");  
05.        }

爲了加載這個工具，是須要引入百度的另外一個工具庫：

JS以下：

01.<script type="text/javascript" src="./JScript/DistanceTool_min.js"></script>  
02.function openGetDistance()  
03.{  
04. var myDis=new BMapLib.DistanceTool(map);//map爲上面已經初始化好的地圖實例   
05. myDis.open();  
06.}

//上面這個DistanceTool_min.js在百度的DEMO裏有，我只是把它考到個人DEBUG下了，具體路徑本身解決。

3.右擊鼠標給地圖上放marker，每個marker的icon換成小汽車，而且顯示座標編號和座標值，而後每放置一次，將數據存入數據庫。

//放標註

01.private void btnPutMarker_Click(object sender, EventArgs e)  
02.       {  
03.           if (radioButton1.Checked || radioButton2.Checked || radioButton3.Checked || radioButton4.Checked)  
04.               webBrowser1.Document.InvokeScript("PUTANDSEND");  
05.           else  
06.           {  
07.               MessageBox.Show("至少選擇一項！");  
08.           }  
09.       }  
10.       //獲得Radiobutton的值   
11.       public string setWhichCar()  
12.       {  
13.           if (radioButton1.Checked)  
14.               return "1";  
15.           if (radioButton2.Checked)  
16.               return "2";  
17.           if (radioButton3.Checked)  
18.               return "3";  
19.           if (radioButton4.Checked)  
20.               return "4";  
21.           return "Erro";  
22.       }  
23.       //將從JS裏獲得的汽車數據顯示到文本框內，而且存入數據庫   
24.       public void PutIntotextBox(object markerIndex,object carNumber,object JSlng,object JSlat)  
25.       {  
26.           text_index.Text =markerIndex.ToString();  
27.           text_num.Text = (string)carNumber;  
28.           text_lng.Text = JSlng.ToString();  
29.           text_lat.Text = JSlat.ToString();  
30.           string sql = "insert into 汽車軌跡數據 values ('"+text_num.Text+"','"+text_index.Text+"','"+text_lng.Text+"','"+text_lat.Text+"','"+DateTime.Now.ToString()+"')";  
31.           DBfunction.getcom(sql);  
32.             
33.       }

JS腳本以下：

01.//---------------放標註，而且將JS的數據傳送給WINFORM------------   
02.function PUTANDSEND()  
03.{  
04.  map.addEventListener("rightclick",putAndsend);  
05.}  
06.function putAndsend(e)  
07.{  
08.  //放標註   
09.  var p1=new BMap.Point(e.point.lng,e.point.lat);  
10.  var marker = new BMap.Marker(p1,{icon:myIcon});//將標註的圖標改成小汽車   
11.  map.addOverlay(marker);  
12.  marker_num++;//標註索引，這個是個全局變量   
13.  var whichCar=window.external.setWhichCar();  
14.  var label=new BMap.Label(whichCar+"號車-座標"+marker_num+":"+  
15."("+e.point.lng+","+e.point.lat+")",{offset:new BMap.Size(20,-10)});  
16.  marker.setLabel(label);  
17.  //給WINFORM傳值   
18.  window.external.PutIntotextBox(marker_num,whichCar,e.point.lng,e.point.lat);  
19.    
20.}  
//---------------放標註，而且將JS的數據傳送給WINFORM------------
function PUTANDSEND()
{
  map.addEventListener("rightclick",putAndsend);
}
function putAndsend(e)
{
  //放標註
  var p1=new BMap.Point(e.point.lng,e.point.lat);
  var marker = new BMap.Marker(p1,{icon:myIcon});//將標註的圖標改成小汽車
  map.addOverlay(marker);
  marker_num++;//標註索引，這個是個全局變量
  var whichCar=window.external.setWhichCar();
  var label=new BMap.Label(whichCar+"號車-座標"+marker_num+":"+
"("+e.point.lng+","+e.point.lat+")",{offset:new BMap.Size(20,-10)});
  marker.setLabel(label);
  //給WINFORM傳值
  window.external.PutIntotextBox(marker_num,whichCar,e.point.lng,e.point.lat);
  
}

4.根據上面已經模擬的汽車歷史座標，能夠查詢具體車輛的歷史軌跡（即從數據庫裏提取數據，畫軌跡）

01.private void btnDrawOrit_Click(object sender, EventArgs e)  
02.        {  
03.            string ss = "^[0-9]*$"; //正則表達式   
04.            string cc = text_whichCar.Text.Trim().ToString();  
05.            bool match = Regex.IsMatch(cc, ss);  
06.            if (Convert.ToInt32(text_whichCar.Text) > 4 || !match||text_whichCar.Text.Trim().Equals(String.Empty))  
07.            // webBrowser1.Document.InvokeScript("PUTANDSEND");   
08.            {  
09.                MessageBox.Show("您輸入的不是數字，或者編號不在範圍內！");  
10.            }  
11.            else  
12.            {  
13.                string getdata_sql = "select * from 汽車軌跡數據 where 汽車編號=" + text_whichCar.Text;  
14.                whichCarData(getdata_sql);  
15.            }  
16.        }

//從數據庫裏的取出經緯度傳送給JS

01.public void whichCarData(string limit_sql)  
02.       {        
03.               OleDbDataReader DR = DBfunction.getread(limit_sql);  
04.               ArrayList a = new ArrayList();  
05.               while (DR.Read())  
06.               {  
07.                   a.Add(DR[2]);//經度   
08.                   a.Add(DR[3]);//緯度   
09.                   Rows_Num++;  
10.               }  
11.               if (Rows_Num == 0)  
12.                   MessageBox.Show("該車輛，無歷史信息！");  
13.               else  
14.               {  
15.                   for (int i = 0; i <= 2 * Rows_Num - 1; i++)  
16.                   {  
17.                       pointArr[i] = Convert.ToDouble(a[i]);  
18.                   }  
19.  
20.                   webBrowser1.Document.InvokeScript("DrawOrit1");  
21.               }  
22.       }  
23.      //輔助方法   
24.       //獲取計數   
25.       public int getRowsNumber()  
26.       {  
27.           return Rows_Num;  
28.       }  
29.//根據索引獲取特定座標   
30.       public double Getpoints(int index)  
31.       { return pointArr[index]; }

JS腳本以下：

//------------從後臺數據庫得到點集合來畫軌跡(無參數版本)，測試可用

01.function DrawOrit1()  
02.{  
03. var Array=[];  
04.var total_num= window.external.getRowsNumber();  
05.for(var i=0;i<=2*total_num-1;i++)  
06.{  
07. Array.push(window.external.Getpoints(i));  
08.}  
09.  
10.var PointArr=[];  
11.for(var i=0;i<=Array.length-1;i+=2)  
12.{//偶數索引存經度，奇數存維度   
13.  PointArr.push(new BMap.Point(Array[i],Array[i+1]));  
14.}  
15.var polyline = new BMap.Polyline(PointArr, {strokeColor:"blue", strokeWeight:6,   strokeOpacity:0.5});  //定義折線   
16.  map.addOverlay(polyline);  
17.window.external.ClearRows_num();//重置窗體計數器   
18.}

5.打開繪圖工具，這個工具能夠畫直線，圓，矩形等等，其中我這裏用的主要是畫圓的方法，畫好圓後，能夠獲得哪些車輛在這個圓內，並將其標註出來（其實就是一個預警範圍）。

//開啓畫圖工具按鈕

01.private void btnDrawPicture_Click(object sender, EventArgs e)  
02.      {  
03.          if (radio_Circle.Checked)  
04.          { webBrowser1.Document.InvokeScript("drawCircle"); }  
05.          else  
06.          { webBrowser1.Document.InvokeScript("drawRec"); }  
07.      }

//搜索當前車輛位置,返回各個車輛的座標

01.public double SearchAllCars(int index)  
02.        {  
03.             
04.            string sql="select * from 汽車軌跡數據";  
05.            OleDbDataReader dr= DBfunction.getread(sql);  
06.           ArrayList allCars = new ArrayList();  
07.            while (dr.Read())  
08.            {  
09.                allCars.Add(dr[2]);  
10.                allCars.Add(dr[3]);  
11.            }  
12.            Danger_Num = allCars.Count;  
13.            double[] sendto_JS = new double[allCars.Count];  
14.            allCars.CopyTo(sendto_JS);  
15.             
16.                return sendto_JS[index];  
17.        }  
18.//全局變量，返回有危險的車輛個數   
19.        public int GetdangerNum()  
20.        { return Danger_Num; }

JS腳本以下：

01.<!--加載鼠標繪製工具-->  
02.<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>  
03.<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />  
04.//回調得到覆蓋物的信息（修改後的版本,已測試可用）   
05.    var complete=function(e)  
06.   {  
07.    overlays.push(e.overlay);  
08.    if (e.drawingMode == BMAP_DRAWING_CIRCLE)   
09.          {  
10.            //隨便賦值，刷新一遍數據庫(此方法只爲演示，實際中要另考慮算法)   
11.          var test=  window.external.SearchAllCars(0);  
12.             
13.             
14.         var circle_radius=e.overlay.getRadius();//半徑   
15.          //圓心   
16.         var circle_point=new BMap.Point(e.overlay.getCenter().lng,e.overlay.getCenter().lat);  
17.         //從WINFORM裏取出數據   
18.         var dangerCars=[];  
19.         var pointlen=window.external.GetdangerNum();  
20.   
21.         for(var k=0;k<=pointlen-1;k++)  
22.          {  
23.             dangerCars.push(window.external.SearchAllCars(k));  
24.          }  
25.         var BMappoints=[];//建立百度地圖接口規定的數組   
26.         for(var j=0;j<=dangerCars.length-1;j+=2)  
27.          {  
28.            BMappoints.push(new BMap.Point(dangerCars[j],dangerCars[j+1]));  
29.          }  
30.            
31.          for(var i=0;i<=BMappoints.length-1;i++)  
32.          {  
33.            if(map.getDistance(circle_point,BMappoints[i])<=circle_radius)  
34.            {  
35.               AddMarker(BMappoints[i]);//調用添加標註版本V3.0   
36.            }      
37.          }  
38.            
39.        }  
40.            
41.      };  
42.//線條樣式   
43.    var styleOptions = {  
44.        strokeColor:"blue",    //邊線顏色。   
45.        fillColor:"blue",      //填充顏色。當參數爲空時，圓形將沒有填充效果。   
46.        strokeWeight: 3,       //邊線的寬度，以像素爲單位。   
47.        strokeOpacity: 1,    //邊線透明度，取值範圍0 - 1。   
48.        fillOpacity: 0.3,      //填充的透明度，取值範圍0 - 1。   
49.        strokeStyle: 'solid' //邊線的樣式，solid或dashed。   
50.    }  
51.    //實例化鼠標繪製工具   
52.    var drawingManager = new BMapLib.DrawingManager(map, {  
53.        isOpen: true, //是否開啓繪製模式   
54.        enableDrawingTool: true, //是否顯示工具欄   
55.        drawingToolOptions: {  
56.            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置   
57.            offset: new BMap.Size(5, 5), //偏離值   
58.            scale: 0.8, //工具欄縮放比例   
59.            drawingTypes : [           
60.            BMAP_DRAWING_CIRCLE,    
61.            BMAP_DRAWING_RECTANGLE   
62.         ]  
63.  
64.        },  
65.        circleOptions: styleOptions, //圓的樣式    
66.        rectangleOptions: styleOptions //矩形的樣式   
67.    });  
68.  
69.      
70.      
71.    //添加鼠標繪製工具監聽事件，用於獲取繪製結果   
72.   drawingManager.addEventListener('overlaycomplete',complete);  
73.      
74. //drawingManager.enableCalculate();   
75.  
76.      
77.    //----------------------公用方法，用元素id獲取元素的值-------------------   
78.    function $(id){  
79.        return document.getElementById(id);  
80.    }  
81.  
82.    //------------------畫矩形，讓WINFORM調用---------------   
83.    function drawRec(){  
84.drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE);}  
85.    //------------------畫圓，讓WINFORM調用----------------   
86.     function drawCircle(){  
87.drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);}  
88.    //------------------清除全部已畫圖形，讓WINFORM調用--------------------   
89.    function clearAll() {  
90.        for(var i = 0; i < overlays.length; i++){  
91.            map.removeOverlay(overlays[i]);  
92.        }  
93.        overlays.length = 0  
94.    }

這個功能比較複雜，必需要加入前兩行的庫鏈接才能夠。由於畫圓能夠獲得圓心和半徑，因此我只須要從數據庫裏取出點，而後一一測量其與圓心的距離，而後和半徑比較，只要小於半徑則就在圓內標註。起初頭讓我畫矩形，畫矩形的DEMO以下：

01.//回調得到覆蓋物信息，未使用該版本   
02.    var overlaycomplete = function(e){  
03.        overlays.push(e.overlay);  
04.        var result = "";  
05.         
06.        result += e.drawingMode + ":";  
07.         
08.        if (e.drawingMode == BMAP_DRAWING_CIRCLE) {  
09.             
10.            var circle_radius=e.overlay.getRadius();  
11.            var circle_point=new BMap.Point(e.overlay.getCenter().lng,e.overlay.getCenter().lat);  
12.            alert(map.getDistance(circle_point,tests[1]));  
13.             for(var i=0;i<3;i++)  
14.          {  
15.            if(map.getDistance(circle_point,tests[i])<=circle_radius)  
16.            {  
17.               AddMarker(tests[i]);  
18.            }      
19.          }  
20.            alert(result);  
21.        }  
22.        if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) {  
23.            result += ' 所畫的點個數：' + e.overlay.getPath()[1].lng;  
24.            alert(result);  
25.        }  
26.          
27.    };

這裏是修改的百度DEMO，其中有一行result += ' 所畫的點個數：' + e.overlay.getPath()[1].lng;在百度原有的demo裏是這樣寫的result += ' 所畫的點個數：' + e.overlay.getPath().length;只會返回一個數據，我仔細看了下函數名，getPath()，並且還有length的屬性，那麼確定是數組，並且是返回的邊或者點的個數，而邊必定是由點組成的，根據以前的Ployline函數能夠推測，這個函數一定是一個存放多邊形點的數組，那麼我就試了試e.overlay.getPath()[1].lng，看能不能取到某個點的經度值，果真不出我所料，能夠的，當時興奮了好一陣子，有了這個方法，矩形的四個點就都能記錄，那麼就能夠跟數據庫裏取出的點直接進行經緯度比較，也能夠標註預警範圍，不過仍是沒有用圓方便。

以上內容來自網上整理，感受很不錯收藏了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。