前端工程师必备之----百度地图

1.初始化地图,并设置地图中心点

var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
 
当然也可以根据城市名称设置地图的中心点:
map.centerAndZoom("上海",15);  

map.addControl(new BMap.ScaleControl());    //添加左下方比例尺控件
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.setCurrentCity("北京");          // 设置地图显示的城市

 

 2.拖拽地图与滚轮的使用

map.enableScrollWheelZoom(true);
map.disableDragging();     //禁止拖拽
map.enableScrollWheelZoom();    //启用滚轮放大缩小

 

3.创建地图的时候,关闭地图底图按钮,建筑的可点功能

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

 

4.移动地图,设置地图最大最小的缩放级别

var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
 
//当然也可以动态设置级别:
map.setMaxZoom(10);
map.setMinZoom(2);

 

5.获得地图当前中心点,返回两点间的距离

getCenter()
getDistance(start:Point, end:Point)
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)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位

 

6.添加覆盖物,移除覆盖物,清楚所有覆盖物

addOverlay(overlay:Overlay)
removeOverlay(overlay:Overlay)
clearOverlays()
getOverlays()    //返回地图上所有的覆盖物

 

7.地图添加控件的时候可以设置地图放在四个角中的哪个角

var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
BMAP_ANCHOR_TOP_LEFT //表示控件定位于地图的左上角。

BMAP_ANCHOR_TOP_RIGHT //表示控件定位于地图的右上角。

BMAP_ANCHOR_BOTTOM_LEFT //表示控件定位于地图的左下角。

BMAP_ANCHOR_BOTTOM_RIGHT //表示控件定位于地图的右下角。

//缩放空间的type的四种类型:
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角,仅包含平移和缩放按钮
BMAP_NAVIGATION_CONTROL_LARGE //表示显示完整的平移缩放控件。

BMAP_NAVIGATION_CONTROL_SMALL //表示显示小型的平移缩放控件。

BMAP_NAVIGATION_CONTROL_PAN //表示只显示控件的平移部分功能。

BMAP_NAVIGATION_CONTROL_ZOOM //表示只显示控件的缩放部分功能

 

8.地图采集的经纬度,转化为度数,再转化为百度坐标点,在用new BMap.Point转换成打在地图上的点

  • 4
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值