百度地图API入门4-常用代码

1.初始化地图,设置中心点坐标和地图级别

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 

2.设置地图显示的城市

map.setCurrentCity("成都");          

3.开启鼠标滚轮缩放

map.enableScrollWheelZoom(true);     
  1. 添加地图类型控件
map.addControl(new BMap.MapTypeControl({
	mapTypes:[
        BMAP_NORMAL_MAP,
		BMAP_SATELLITE_MAP,
        BMAP_HYBRID_MAP
    ]}));

5.根据城市名设置地图中心点

map.centerAndZoom("成都",15);      // 初始化地图,用城市名设置地图中心点,就不用经纬度了
  1. 设置地图最大、最小级别
var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
map.setMinZoom(3);
map.setMaxZoom(15);
  1. 缩放地图
map.setZoom(14);
  1. 移动地图(中心点)
map.panTo(new BMap.Point(113.262232,23.154345));   

9.拖拽地图

map.disableDragging();     //禁止拖拽
map.enableDragging();   //开启拖拽  默认开启
  1. 设置地图显示范围(需要BMapLib)
var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));	
BMapLib.AreaRestriction.setBounds(map, b);
  1. 添加自定义控件
  2. 添加覆盖物
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
map.addOverlay(marker);
map.clearOverlays(); 
marker.show();
marker.hide();
  1. 添加自定义覆盖物
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("/img/test.gif", new BMap.Size(300,157));
var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
map.addOverlay(marker2);              // 将标注添加到地图中

13.设置点是否可拖拽

marker.disableDragging();           // 不可拖拽
marker.enableDragging();           // 不可拖拽
  1. 文字标签
var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
marker.setLabel(label);

15.信息窗口

var opts = {
	  width : 200,     // 信息窗口宽度
	  height: 100,     // 信息窗口高度
	  title : "海底捞王府井店" , // 信息窗口标题
	}
var infoWindow = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
marker.addEventListener("click", function(){          
	map.openInfoWindow(infoWindow,point); //开启信息窗口
});
  1. 给覆盖物添加右键菜单
//创建右键菜单
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));

var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.addContextMenu(markerMenu);
  1. 地图事件-点击覆盖物开启信息窗口
var infoWindow = new BMap.InfoWindow("test:111<br/>test:222", opts); // 创建信息窗口对象
marker.addEventListener("click",
  function() {
    map.openInfoWindow(infoWindow, point); //开启信息窗口
  });
  1. 单击获取点击的经纬度
 map.addEventListener("click",function(e){
     alert(e.point.lng + "," + e.point.lat);
 });
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值