1. 程式人生 > >百度地圖api 常用 例子

百度地圖api 常用 例子

getc onf htc 默認 tor settime min navig 通過

功能一:獲取map地圖窗口的可視區域: var map = new BMap.Map("allmap"); // 創建Map實例 map.centerAndZoom(new BMap.Point(116.4035,39.915), 14); //初始化時,即可設置中心點和地圖縮放級別。 var bs = map.getBounds(); //獲取可視區域 var bssw = bs.getSouthWest(); //可視區域左下角 var bsne = bs.getNorthEast(); //可視區域右上角 alert("當前地圖可視範圍是:" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat); 功能二:3D展示地圖:
var map = new BMap.Map("allmap", {mapType:BMAP_PERSPECTIVE_MAP}); var point = new BMap.Point(116.4035,39.915); map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的 map.centerAndZoom(point,19); map.enableScrollWheelZoom(true); 功能三:設置地圖允許的大小: var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 創建Map實例 map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //初始化時,即可設置中心點和地圖縮放級別。 map.enableScrollWheelZoom(true); 功能四:獲取當前地圖視野的中心點:
var map = new BMap.Map("allmap"); // 創建Map實例 map.centerAndZoom(new BMap.Point(116.4035,39.915),8); //初始化時,即可設置中心點和地圖縮放級別。 alert("當前地圖中心點:" + map.getCenter().lng + "," + map.getCenter().lat); 功能五:google地圖坐標換算百度地圖坐標: //谷歌坐標 var x = 116.32715863448607; var y = 39.990912172420714; var ggPoint = new BMap.Point(x,y); //地圖初始化 var bm = new BMap.Map("allmap"); bm.centerAndZoom(ggPoint, 15); bm.addControl(new BMap.NavigationControl()); //添加谷歌marker和label var markergg = new BMap.Marker(ggPoint); bm.addOverlay(markergg); //添加谷歌marker var labelgg = new BMap.Label("我是谷歌標註哦",{offset:new BMap.Size(20,-10)}); markergg.setLabel(labelgg); //添加谷歌label //坐標轉換完之後的回調函數 translateCallback = function (point){ var marker = new BMap.Marker(point); bm.addOverlay(marker); var label = new BMap.Label("我是百度標註哦",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); //添加百度label bm.setCenter(point); alert(point.lng + "," + point.lat); } setTimeout(function(){ BMap.Convertor.translate(ggPoint,2,translateCallback); //GCJ-02坐標轉成百度坐標 }, 2000); 功能六:GPS坐標換算百度坐標: //GPS坐標 var xx = 116.397428; var yy = 39.90923; var gpsPoint = new BMap.Point(xx,yy); //地圖初始化 var bm = new BMap.Map("allmap"); bm.centerAndZoom(gpsPoint, 15); bm.addControl(new BMap.NavigationControl()); //添加谷歌marker和label var markergps = new BMap.Marker(gpsPoint); bm.addOverlay(markergps); //添加GPS標註 var labelgps = new BMap.Label("我是GPS標註哦",{offset:new BMap.Size(20,-10)}); markergps.setLabel(labelgps); //添加GPS標註 //坐標轉換完之後的回調函數 translateCallback = function (point){ var marker = new BMap.Marker(point); bm.addOverlay(marker); var label = new BMap.Label("我是百度標註哦",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); //添加百度label bm.setCenter(point); alert(point.lng + "," + point.lat); } setTimeout(function(){ BMap.Convertor.translate(gpsPoint,0,translateCallback); //真實經緯度轉成百度坐標 }, 2000); 功能七:測距:
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)+‘ 米。‘); //獲取兩點距離 var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //定義折線 map.addOverlay(polyline); //添加折線到地圖上 功能八:關鍵字輸入提示詞條: function G(id) { return document.getElementById(id); } var map = new BMap.Map("l-map"); map.centerAndZoom("北京",12); // 初始化地圖,設置城市和地圖級別。 //建立一個自動完成的對象 var ac = new BMap.Autocomplete( {"input" : "suggestId" ,"location" : map}); ac.addEventListener("onhighlight", function(e) { //鼠標放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str+= "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; G("searchResultPanel").innerHTML = str; }); var myValue; ac.addEventListener("onconfirm", function(e) { //鼠標點擊下拉列表後的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; setPlace(); }); function setPlace(){ map.clearOverlays(); //清除地圖上所有覆蓋物 function myFun(){ var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果 map.centerAndZoom(pp, 18); map.addOverlay(new BMap.Marker(pp)); //添加標註 } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); } 功能九:自定義版權控件: var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); map.addControl(cr); //添加版權控件 var bs = map.getBounds(); cr.addCopyright({id: 1, content: "<a href=‘#‘ style=‘font-size:20px;background:yellow‘>我是自定義版權控件呀</a>", bounds: bs}); 功能十:自定義控件: var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 定義一個控件類,即function function ZoomControl(){ // 默認停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMap.Size(10, 10); } // 通過JavaScript的prototype屬性繼承於 BMap.Control ZoomControl.prototype = new BMap.Control(); // 自定義控件必須實現自己的initialize方法,並且將控件的DOM元素返 回 // 在本方法中創建個div元素作為控件的容器,並將其添加到地圖容器中 ZoomControl.prototype.initialize = function(map){ // 創建一個DOM元素 var div = document.createElement("div"); // 添加文字說明 div.appendChild(document.createTextNode("放大2級")); // 設置樣式 div.style.cursor = "pointer"; div.style.border = "1px solid gray"; div.style.backgroundColor = "white"; // 綁定事件,點擊一次放大兩級 div.onclick = function(e){ map.setZoom(map.getZoom() + 2); } // 添加DOM元素到地圖中 map.getContainer().appendChild(div); // 將DOM元素返回 return div; } // 創建控件 var myZoomCtrl = new ZoomControl(); // 添加到地圖當中 map.addControl(myZoomCtrl);

百度地圖api 常用 例子