百度地图常用API

创建地图

<style>
body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>

<div id="map"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script>
	map = new BMap.Map("map"); //创建地图到ID元素容器
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
	map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
	    				
</script>

基本配置

	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	map.disableScrollWheelZoom(true); //禁用鼠标滚轮缩放
	
	map.enableDragging(); //启用拖拽
	map.disableDragging(); //禁止拖拽
	
	map.enableDoubleClickZoom(); //启用双击放大
	map.disableDoubleClickZoom(); //禁用双击放大

	map.setMapStyle({ style: 'midnight' }); //设置地图底图颜色样式
	map.setDefaultCursor("url('http://localhost/images/pointer.cur') 3 6, default"); //设置鼠标指针样式

添加控件

	map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

创建标记

	var myIcon = new BMap.Icon("mapCircle.png", new BMap.Size(10,10)); //自定义点图标
	//var mySvgIcon = new BMap.Icon("icon.svg", new BMap.Size(48,48)); //自定义svg格式图标(svg文件内必须设置宽度和高度，而且与BMap.Size()设置的大小必须保持一致)
	var point = new BMap.Point(116.404, 39.915);
	var marker = new BMap.Marker(point,{
		offset: new BMap.Size(0, 0), //偏移
		icon:myIcon, //图标
	});
	
	//添加文本标记
    var label = new BMap.Label('测试文本', {
        offset: new BMap.Size(10, -10), //设置文本偏移量
    }); 
    marker.setLabel(label);

	marker.setTop('true'); //设置图标为最高层
	map.addOverlay(marker);

创建折线

	var polyline = new BMap.Polyline([new BMap.Point(116.404, 39.915),new BMap.Point(816.104, 88.675)], {
		strokeColor:"#fd8044", //颜色
		strokeWeight:2, //宽度
		strokeOpacity:.9 //不透明度
	});
	map.addOverlay(polyline);

创建文本标记

	var opts = {
		position : new BMap.Point(116.404, 39.915), // 指定文本标注所在的地理位置
		offset   : new BMap.Size(10, -10) //设置文本偏移量
	};
	var label = new BMap.Label('测试文本', opts); // 创建文本标注对象
	label = label.setZIndex(/*这里放递增变量，如i++*/); //设置层级
	label.setStyle({
		color : "#666",
		fontSize : "12px",
		height : "20px",
		padding : "0 5px",
		lineHeight : "20px",
		fontFamily:"微软雅黑",
		borderColor: "#999",
		borderRadius: "2px"
	});
	label.setContent('新文本'); // 动态设置文本内容
	map.addOverlay(label);

创建自定义覆盖物

	var custom_point = new BMap.Point(116.407845, 39.914101); //创建自定义点
	
    function ComplexCustomOverlay(point) { // 定义自定义覆盖物的构造函数 
        this.point = point;
    }
    
    ComplexCustomOverlay.prototype = new BMap.Overlay(); // 继承API的BMap.Overlay 
    
    ComplexCustomOverlay.prototype.initialize = function(map) { // 实现初始化方法 
        this.map = map; // 保存map对象实例 
        var div = this.div = document.createElement('div'); // 创建div元素，作为自定义覆盖物的容器
        div.style.cssText = 'position: absolute; width:300px; height:150px; padding: 24px; background-color: #fff; border-radius: 5px; box-shadow: 0 1px 9px -3px #000;'; // 设置元素外观  
        div.innerHTML = "hello world"; //给元素添加内容
        map.getPanes().labelPane.appendChild(div); // 将div添加到覆盖物容器中 
        return div; // 需要将div元素作为方法的返回值，当调用该覆盖物的show、hide方法，或者对覆盖物进行移除时，API都将操作此元素。
    };
    
    ComplexCustomOverlay.prototype.draw = function() { // 实现绘制方法 
        var pixel = map.pointToOverlayPixel(this.point); // 根据地理坐标转换为像素坐标
	    this.div.style.left = pixel.x + "px"; //把转换结果x设置给容器
	    this.div.style.top  = pixel.y + "px"; //把转换结果y设置给容器 
    };
    
	ComplexCustomOverlay.prototype.show = function(){  // 实现显示方法 
		if(this.div){    
			 this.div.style.display = "block";    
		}    
	};      
	  
	ComplexCustomOverlay.prototype.hide = function(){ // 实现隐藏方法   
		if(this.div){    
			this.div.style.display = "none";    
		}    
	}
	   
	ComplexCustomOverlay.prototype.toggle = function(){ // 添加自定义方法   
		if(this.div){    
			if(this.div.style.display == ""){    
				this.hide();    
			}else {    
				this.show();    
			}    
		}    
	}
	
	var myCompOverlay = new ComplexCustomOverlay(custom_point); //实例化自定义构造函数
    map.addOverlay(myCompOverlay); // 添加自定义覆盖物到地图

设置一组点的最佳视角

	var points = [
		new BMap.Point(111.407845, 39.914101),
		new BMap.Point(112.407845, 39.914101),
		new BMap.Point(113.407845, 39.914101),
	];
	map.setViewport(points); //设置点最佳视角

点击地图获取坐标

	//获取点击坐标
	map.addEventListener("click",function(e){
		e.domEvent.stopPropagation(); //阻止冒泡
		console.log(e.point.lng + ',' + e.point.lat);
	});

点击地图创建点

	//点击创建点
	map.addEventListener("click",function(e){
		var myIcon = new BMap.Icon("mapCircle.png", new BMap.Size(10,10)); //自定义点图标
		//var mySvgIcon = new BMap.Icon("icon.svg", new BMap.Size(48,48)); //自定义svg格式图标(svg文件内必须设置宽度和高度，而且与BMap.Size()设置的大小必须保持一致)
		var point = new BMap.Point(e.point.lng, e.point.lat);
		var marker = new BMap.Marker(point,{
			offset: new BMap.Size(0, 0), //偏移
			icon:myIcon, //图标
		});
		marker.setTop('true'); //设置图标为最高层
		map.addOverlay(marker);
	});

设置地图类型

	
	<select id="typeSelect">
        <option value="BMAP_NORMAL_MAP">地图模式</option>
        <option value="BMAP_HYBRID_MAP">卫星模式</option>
    </select>
    
	<script>
	    typeSelect.onchange = function(event) {
            let value = this.value;
            map.setMapType(window[value]);
        };
	</script>