這一篇我將跟大家分享一下我自己在開發過程中總結出的一些操作地圖的方法,屬性,及思路,希望可以讓大家少走彎路。
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與其交互。下一篇繼續。