1. 程式人生 > >C#呼叫百度地圖API經驗分享(三)

C#呼叫百度地圖API經驗分享(三)

    這一篇我將跟大家分享一下我自己在開發過程中總結出的一些操作地圖的方法,屬性,及思路,希望可以讓大家少走彎路。

1.定位

一般百度的示例DEMO裡開始初始化地圖時用的都是map.centerAndZoom(座標,放大級數);其中座標可以用點代替,也可用字串代替,而放大級數必須是整數,比如:

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

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

但是必須要注意一點,這個點絕對是要用百度的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:

<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom("重慶",12);                   // 初始化地圖,設定城市和地圖級別。
var pointA = new BMap.Point(106.486654,29.490295);  // 建立點座標A--大渡口區
var pointB = new BMap.Point(106.581515,29.615467);  // 建立點座標B--江北區
alert('從大渡口區到江北區的距離是:'+map.getDistance(pointA,pointB)+' 米。');//獲取2點距離
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定義折線
map.addOverlay(polyline);   //新增折線到地圖上
</script>

從以上程式碼中可以得到兩個重要的資訊:

(1)  map.getDistance(點1,點2);這個函式可以很好的幫助我們算兩點的距離,不用自己計算,很方便。

(2)  Ployline函式可以幫助我們劃線,在這裡不難看出它需要的第一個引數是一個點陣列,所以在實際專案中可以將資料先放在數組裡,然後在傳陣列名給它即可(注意一定要例項化,即BMap.Point());所以可以利用它來畫矩形,多邊形等等。。

4.地址解析

function BMap_Geo(detail_address,city)
{
   var myGeo=new BMap.Geocoder();
   myGeo.getPoint(detai_address,
   function(point)
  {
   if(point)
   {
      map.panTo(point);
      map.addOverlay(new BMap.Marker(point));  
   }
  },city)  
}

5.滑鼠實時獲取座標

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

這些全部都是靜態頁面的指令碼,為了更好的實現,我選擇用WINFORM與其互動。下一篇繼續。