百度地图实例
功能一：获取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);