百度地图API

2016-11-05

cmd-markdown-logo

百度地图API http://lbsyun.baidu.com/jsdemo.htm#a1_2

百度地图API http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html

百度地图API例子

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin:0;
		font-family:"微软雅黑";
		}
	</style>
	/*百度地图密钥*/
	<script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0
	&ak=IW2Nj0u8Fc7bIj6IpD59KPWMaUb9270D"></script>
	<title>地址解析</title>
</head>
<body>
	<div id="allmap" style="width:800px;height:500px;" ></div>
</body>
</html>
<script type="text/javascript">
	// 创建地图实例，
	var map = new BMap.Map("allmap", {
        enableMapClick : false,//禁止点击地图底图
        enableAutoResize:true,//是否自动适应地图容器变化，默认启用
        minZoom : 10
    });
    //设置地图中心点
    map.centerAndZoom(new BMap.Point(112.325396,28.139581),11);
    //全景类
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    //禁止鼠标滚轮缩放
    map.disableScrollWheelZoom();
    //禁止拖动
    map.disableDragging();
    //开启拖动
    map.enableDragging();
    //禁止双击缩放
    map.disableDoubleClickZoom();
    //开启双击缩放
    map.enableDoubleClickZoom();
</script>

添加地图控件(MVVM框架模块化需要挂载window上才行)

addMapControl = () => {
    let map = this.map;
    // 左上角，添加比例尺
    var top_right_control = new window.BMap.ScaleControl
    ({ anchor: window.BMAP_ANCHOR_TOP_RIGHT });
    var top_right_navigation = new window.BMap.NavigationControl
    ({ anchor: window.BMAP_ANCHOR_TOP_RIGHT });
    //添加控件和比例尺
    map.addControl(top_right_control);
    map.addControl(top_right_navigation);
    map.enableScrollWheelZoom(true);
    // legend.addLegend(map);
};

创建标注以及自定义图标

let bikeIcon = new window.BMap.Icon("/assets/bike.jpg", new BMap.Size(36, 42), {
    imageSize: new BMap.Size(36, 42),
    anchor: new window.Size(18, 42)
});
bikeList.forEach((item) => {
    let p = item.split(",");
    let point = new window.BMap.Point(p[0], p[1]);
    var bikeMarker = new window.BMap.Marker(point, { icon: bikeIcon });
    this.map.addOverlay(bikeMarker);
    // 添加地图控件
    this.addMapControl();
})

自定义标注及事件

function createMaker4(data, hoverHandler, mouseoutHandler, e) {
	// 自定义标注
	var pt = new BMap.Point(data.lon, data.lat);
	var myIcon = new BMap.Icon("image/marker2.png", new BMap.Size(25, 33));
	// 创建标注
	var marker = new BMap.Marker(pt, {
		icon : myIcon
	});
	// 给标注添加点击事件
	 marker.addEventListener('click',clickHandler);
	// 鼠标悬浮事件
	if (hoverHandler) {
		marker.addEventListener('mouseover', hoverHandler);
	}
	if (mouseoutHandler) {
		marker.addEventListener('mouseout', mouseoutHandler);
	}
	return marker;
};
//调用
var marker4 = createMaker4(b, levelHoverHandler.bind(b)
, levelMouseOutHandler);
map.addOverlay(marker4);

鼠标悬浮创建地图上的文本标注 new BMap.Label(html, opts)

var labelStyle = {
    color : "#fff",
    border : "0px",
    fontSize : "12px",
    lineHeight : "20px",
    fontFamily : "微软雅黑",
    boxShadow : "0 3px 10px #002134",
    backgroundColor : '#2a71e6',
    borderRadius : "2px"
};

var currentTip = ''
// 标注鼠标移入事件
function levelHoverHandler(data, e) {
	var data = this;
	//转换成百度地图坐标
	var point = new BMap.Point(data.lon, data.lat);
	var opts = {
		position : point,
		offset : new BMap.Size(15, -31)
	};

	var html = "<div style='position:relative'>" +'内容'+ "</div>";
	 // 创建文本标注对象
	currentTip = new BMap.Label(html, opts);
	currentTip.setStyle(labelStyle);
	currentTip.setZIndex(9999);
	map.addOverlay(currentTip);
};

// 标注鼠标移出事件
function levelMouseOutHandler(type, target) {
	if (currentTip) {
		map.removeOverlay(currentTip);
	}
	currentTip = null;
};

画线 BMap.Point

//行驶路线
let routeList = [];
list.forEach((item) => {
    let p = item.split(",");
    let point = new window.BMap.Point(p[0], p[1]);
    routeList.push(point);
})
// 画线
var polyLine = new window.BMap.Polyline(routeList, {
    strokeColor: "#ef4136",
    strokeWeight: 3,
    strokeOpacity: 1
});
this.map.addOverlay(polyLine);

画覆盖物 new BMap.Polygon

//Boundary此类表示一个行政区域的边界。
function getBoundary(){
    var bdary = new BMap.Boundary();
    bdary.get("宁乡", function(rs){//获取行政区域
        //行政区域的点有多少个
        var count = rs.boundaries.length;
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return ;
            };
        })
        //画遮蔽层的相关方法
        /*思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，
        然后再将每个闭合区域合并进来，并全部连到西北角。
        这样就做出了一个经过多次西北角的闭合多边形*/
        //定义中国东南西北端点，作为第一层
        var pNW = { lat: 59.0, lng: 73.0 };
        var pNE = { lat: 59.0, lng: 136.0 };
        var pSE = { lat: 3.0, lng: 136.0 };
        var pSW = { lat: 3.0, lng: 73.0 };
        //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
        var pArray = [];
        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);

        var pointArray = [];
        for (var i = 0; i < count; i++) {
            //建立多边形覆盖物 fillOpacity: 0.9
            var ply = new BMap.Polygon(rs.boundaries[i],
            {strokeWeight: 2, strokeColor: "#50e1fe",
            fillColor: "#005a85"});
            map.addOverlay(ply);  //添加覆盖物
            pointArray = pointArray.concat(ply.getPath());
            //将闭合区域加到遮蔽层上，
            //每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
            pArray = pArray.concat(ply.getPath());
            pArray.push(pArray[0]);
        }
	});
};