百度API学习

        地图事例

点定位

  var map = new BMap.Map("allmap");            // 创建Map实例                             var map2 = new BMap.Map("allmap2");            // 创建Map实例

var point = new BMap.Point(104.072091, 30.663729); // 创建点坐标                var point2 = new BMap.Point(116.404, 39.915);  //可同时加载两张地图

城市定位

map.centerAndZoom("成都",15);                 // 初始化地图,用城市名设置地图中心点         

map.enableScrollWheelZoom();                 //启用滚轮放大缩小   

缩放级别

var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
map.centerAndZoom(new BMap.Point(104.072091, 30.663729),8); 
map.enableScrollWheelZoom(true);

移动地图

map.centerAndZoom(new BMap.Point(104.072091, 30.663729),8); 
setTimeout(function(){
map.panTo(new BMap.Point(113.262232,23.154345));   //两秒后移动到广州
}, 2000);      

地图放大指定倍数

setTimeout(function(){
map.setZoom(14);   
}, 2000);  //2秒后放大到14级

禁止和开启拖拽

map.disableDragging();     //禁止拖拽
setTimeout(function(){
  map.enableDragging();   //两秒后开启拖拽
  //map.enableInertialDragging();   //两秒后开启惯性拖拽
}, 2000);

设定地图范围

var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
try {
BMapLib.AreaRestriction.setBounds(map, b);
} catch (e) {
alert(e);
}  //防止地图拖出该区域（重新弹回）

显示地图范围

         var bs = map.getBounds();   //获取可视区域
var bssw = bs.getSouthWest();   //可视区域左下角
var bsne = bs.getNorthEast();   //可视区域右上角
alert("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);

获取两点间距离

map.getDistance(pointA,pointB)).toFixed(2) 保留小数点后两位

        var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线 划线颜色 宽度 透明度
map.addOverlay(polyline);     //添加折线到地图上

关闭地图POI

var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时，关闭底图可点功能

地图控件事例

var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});//停泊 左上角，添加比例尺

var top_left_navigation = new BMap.NavigationControl();  //左上角，航行控制添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type:BMAP_NAVIGATION_CONTROL_LARGE}); //右上角，仅包含平移 和缩放按钮
/*   缩放控件type有四种类型:

BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；

BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；

BMAP_NAVIGATION_CONTROL_ZOOM： 仅包含缩放按钮   */

      BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});//地图类型

BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});//地图类型

定位

var navigationControl = new BMap.NavigationControl({// 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_LEFT,// LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,

    enableGeolocation: true// 启用显示定位
  });      

创建小狐狸图标
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(1000,557));
var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
map.addOverlay(marker2);  

标定可拖拽

  marker.enableDragging()

标定区域可编辑

polygon.enableEditing()

覆盖显示、隐藏

<div id="r-result">
<input type="button" οnclick="showOver()" value="显示" />
<input type="button" οnclick="hideOver()" value="隐藏" />
</div>

function showOver(){
marker.show(); polyline.show(); circle.show();
}
function hideOver(){
marker.hide(); polyline.hide(); circle.hide();
}

添加文字标签

var label = new BMap.Label("欢迎使用百度地图，这是一个简单的文本标注哦~", opts);  // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
map.addOverlay(label);   

为覆盖物添加文字标签

var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中

var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
marker.setLabel(label);

获取覆盖物信息

var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中
marker.addEventListener("click",getAttr);
function getAttr(){
var p = marker.getPosition();       //获取marker的位置
alert("marker的位置是" + p.lng + "," + p.lat);   
}

标点

function addMarker(point){
 var marker = new BMap.Marker(point);
 map.addOverlay(marker);
}
// 随机向地图添加25个标注
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i <25; i ++) {
var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat + latSpan * (Math.random() * 0.7));
addMarker(point);
}

标点 建label 删除特定点label

function addMarker(point){
 var marker = new BMap.Marker(point);
      marker.setLabel(label);
 map.addOverlay(marker);
}

var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
var label = new BMap.Label("我是id="+i,{offset:new BMap.Size(20,-10)});
addMarker(point,label);

function deletePoint(){
var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length -1; i++){
if(allOverlay[i].getLabel().content == "我是id=1"){
map.removeOverlay(allOverlay[i]);
return false;
}
}
}

添加弧线

var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
map.addOverlay(curve); //添加到地图中
curve.enableEditing(); //开启编辑功能