功能一：獲取map地圖窗口的可視區(qū)域： var map = new BMap.Map("allmap"); ? ? ? ? ? ?// 創(chuàng)建Map實(shí)例 map.centerAndZoom(new BMap.Point(116.4035,39.915), 14); ?//初始化時(shí)，即可設(shè)置中心點(diǎn)和地圖縮放級(jí)別。 var bs = map.getBounds(); ? //獲取可視區(qū)域 var bssw = bs.getSouthWest(); ? //可視區(qū)域左下角 var bsne = bs.getNorthEast(); ? //可視區(qū)域右上角 alert("當(dāng)前地圖可視范圍是：" + 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("北京"); // 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的? map.centerAndZoom(point,19);? map.enableScrollWheelZoom(true); 功能三：設(shè)置地圖允許的大小： var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 創(chuàng)建Map實(shí)例? map.centerAndZoom(new?BMap.Point(116.4035,39.915),15); //初始化時(shí)，即可設(shè)置中心點(diǎn)和地圖縮放級(jí)別。? map.enableScrollWheelZoom(true); 功能四：獲取當(dāng)前地圖視野的中心點(diǎn)： var map = new BMap.Map("allmap"); // 創(chuàng)建Map實(shí)例? map.centerAndZoom(new BMap.Point(116.4035,39.915),8); //初始化時(shí)，即可設(shè)置中心點(diǎn)和地圖縮放級(jí)別。? alert("當(dāng)前地圖中心點(diǎn)：" + map.getCenter().lng + "," + map.getCenter().lat); 功能五：google地圖坐標(biāo)換算百度地圖坐標(biāo)： //谷歌坐標(biāo)? 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("我是谷歌標(biāo)注哦",{offset:new BMap.Size(20,-10)});? markergg.setLabel(labelgg); //添加谷歌label //坐標(biāo)轉(zhuǎn)換完之后的回調(diào)函數(shù)? translateCallback = function (point){? var marker = new BMap.Marker(point);? bm.addOverlay(marker);? var label = new BMap.Label("我是百度標(biāo)注哦",{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坐標(biāo)轉(zhuǎn)成百度坐標(biāo)? }, 2000);
功能六：GPS坐標(biāo)換算百度坐標(biāo)： //GPS坐標(biāo) 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標(biāo)注? var labelgps = new BMap.Label("我是GPS標(biāo)注哦",{offset:new BMap.Size(20,-10)});? markergps.setLabel(labelgps); //添加GPS標(biāo)注 //坐標(biāo)轉(zhuǎn)換完之后的回調(diào)函數(shù)? translateCallback = function (point){ var marker = new BMap.Marker(point);? bm.addOverlay(marker);? var label = new BMap.Label("我是百度標(biāo)注哦",{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); //真實(shí)經(jīng)緯度轉(zhuǎn)成百度坐標(biāo) }, 2000); 功能七：測(cè)距： var map = new BMap.Map("allmap"); map.centerAndZoom("重慶",12); ? ? ? ? ? ? ? ? ? // 初始化地圖,設(shè)置城市和地圖級(jí)別。 var pointA = new BMap.Point(106.486654,29.490295); ?// 創(chuàng)建點(diǎn)坐標(biāo)A--大渡口區(qū) var pointB = new BMap.Point(106.581515,29.615467); ?// 創(chuàng)建點(diǎn)坐標(biāo)B--江北區(qū) alert('從大渡口區(qū)到江北區(qū)的距離是：'+map.getDistance(pointA,pointB)+' 米。'); ? ? //獲取兩點(diǎn)距離 var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); ?//定義折線(xiàn) map.addOverlay(polyline); ? //添加折線(xiàn)到地圖上 功能八：關(guān)鍵字輸入提示詞條： function G(id) { return document.getElementById(id); } var map = new BMap.Map("l-map"); map.centerAndZoom("北京",12); ? ? ? ? ? ? ? ? ? // 初始化地圖,設(shè)置城市和地圖級(jí)別。 //建立一個(gè)自動(dòng)完成的對(duì)象 var ac = new BMap.Autocomplete(??{"input" : "suggestId"?,"location" : map}); ac.addEventListener("onhighlight", function(e) { ?//鼠標(biāo)放在下拉列表上的事件 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) { ? ?//鼠標(biāo)點(diǎn)擊下拉列表后的事件 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; ? ?//獲取第一個(gè)智能搜索的結(jié)果 map.centerAndZoom(pp, 18); map.addOverlay(new BMap.Marker(pp)); ? ?//添加標(biāo)注 } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); } 功能九：自定義版權(quán)控件： 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); //添加版權(quán)控件 var bs = map.getBounds(); cr.addCopyright({id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定義版權(quán)控件呀</a>", bounds: bs}); 功能十：自定義控件： var map = new BMap.Map("allmap");? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 定義一個(gè)控件類(lèi),即function? function ZoomControl(){ // 默認(rèn)停靠位置和偏移量? this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;? this.defaultOffset = new BMap.Size(10, 10);? } // 通過(guò)JavaScript的prototype屬性繼承于 BMap.Control ZoomControl.prototype = new BMap.Control(); // 自定義控件必須實(shí)現(xiàn)自己的initialize方法,并且將控件的DOM元素返 回 // 在本方法中創(chuàng)建個(gè)div元素作為控件的容器,并將其添加到地圖容器中? ZoomControl.prototype.initialize = function(map){ // 創(chuàng)建一個(gè)DOM元素? var div = document.createElement("div"); // 添加文字說(shuō)明? div.appendChild(document.createTextNode("放大2級(jí)")); // 設(shè)置樣式? div.style.cursor = "pointer";? div.style.border = "1px solid gray";? div.style.backgroundColor = "white"; // 綁定事件,點(diǎn)擊一次放大兩級(jí)? div.onclick = function(e){ map.setZoom(map.getZoom() + 2); } // 添加DOM元素到地圖中? map.getContainer().appendChild(div); // 將DOM元素返回? return div; } // 創(chuàng)建控件? var myZoomCtrl = new ZoomControl(); // 添加到地圖當(dāng)中? map.addControl(myZoomCtrl); 末了 ? 提供API ?一個(gè)不錯(cuò)的DEMOS ?http://developer.baidu.com/map/jsdemo.htm#a1_1
來(lái)自 :?http://yegshine.blog.163.com/blog/static/118945309201332413729592/

轉(zhuǎn)載于:https://www.cnblogs.com/Jhon-xu/p/8708687.html

總結(jié)

以上是生活随笔為你收集整理的转载：百度地图api 常用 例子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。