百度地图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);
 });
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页