百度地图操作 描点 画圆 矩形 线条 计算面积 距离 坐标转换 JavaScript

<!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">
			#allmap {
				width: 900px;
				height: 600px;
				font-family: "微软雅黑";
				padding-left: 0px;
				float: left;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZlFv2wRgICUlrtCEwG8gTNGVoMgP1528"></script>
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
		<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
		<script type="text/javascript" src="js/geoutils.js"></script>
		<title>地图展示</title>
	</head>

	<body>
		<div id="allmap"></div>
		<div id="carInfo" style="width: 410px;float: right;">查询car信息</div>
	</body>

</html>
<script type="text/javascript">
	
	
	//////////////////////////////////////////////////////////////////////////
	//  百度地图常用操作  包含功能
	//	1.地图描点  更换点样式  点击点显示自定义详情
	//  2.画圆,矩形,线条,多边形  获取所画图形面积,线条距离,坐标,判断自定义点是否在范围内
	//  3.地址转换坐标
	//  4.坐标转换地址
	//  5.画图工具样式
	//	6.作者 :12693266 欢迎交流
	//////////////////////////////////////////////////////////////////////////
	
	//初始化函数
	$(function() {
		initBaiDuMap();
		addCarInfo();
	});

	//模拟数据数据信息
	var dataInfo = [{
			name: "地址:丁白村",
			longitude: 108.926677,
			latitude: 34.225633
		},
		{
			name: "地址:城西客运站",
			longitude: 108.88071,
			latitude: 34.279085
		},
		{
			name: "地址:绿地蓝海大厦",
			longitude: 108.890486,
			latitude: 34.203292
		},
		{
			name: "地址:汇鑫IBC",
			longitude: 108.892021,
			latitude: 34.203013
		},
		{
			name: "地址:大唐芙蓉园",
			longitude: 108.980295,
			latitude: 34.218788
		},
		{
			name: "地址:小寨地铁站",
			longitude: 108.952914,
			latitude: 34.229383
		},
		{
			name: "地址:北山门村",
			longitude: 108.926577,
			latitude: 34.217458
		},
		{
			name: "地址:陕西自然博物馆",
			longitude: 108.952242,
			latitude: 34.2035
		},
		{
			name: "地址:陕西师范大学",
			longitude: 108.962787,
			latitude: 34.214724
		},
		{
			name: "地址:陕西省科技厅",
			longitude: 108.960637,
			latitude: 34.271171
		},
		{
			name: "地址:怡兴大厦",
			longitude: 108.926375,
			latitude: 34.208395
		},
		{
			name: "地址:西安托朴利电器有限公司",
			longitude: 108.85529,
			latitude: 34.19704
		}
	];

	//地图全局变量
	var map;

	//图画样式  -- 圆红色边框
	var styleOptions = {
		strokeColor: "red", //边线颜色。  
		fillColor: "white", //填充颜色。当参数为空时,圆形将没有填充效果。  
		strokeWeight: 2, //边线的宽度,以像素为单位。  
		strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。  
		fillOpacity: 0.6, //填充的透明度,取值范围0 - 1。  
		strokeStyle: 'solid' //边线的样式,solid或dashed。  
	}

	//图画样式 -- 框绿色边框
	var styleOptionsGree = {
		strokeColor: "green", //边线颜色。  
		fillColor: "white", //填充颜色。当参数为空时,圆形将没有填充效果。  
		strokeWeight: 2, //边线的宽度,以像素为单位。  
		strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。  
		fillOpacity: 0.6, //填充的透明度,取值范围0 - 1。  
		strokeStyle: 'solid' //边线的样式,solid或dashed。  
	}

	//初始化百度地图
	function initBaiDuMap() {

		map = new BMap.Map("allmap"); // 创建Map实例
		map.centerAndZoom("西安", 12);
		map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

		//实例化鼠标绘制工具  
		var drawingManager = new BMapLib.DrawingManager(map, {
			enableCalculate: true, //是否开启测量模式
			isOpen: false, //是否开启绘制模式
			enableDrawingTool: true, //是否显示工具栏
			drawingToolOptions: {
				anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //位置
				offset: new BMap.Size(5, 5), //偏离值
				scale: 0.8, //工具栏缩放比例
				drawingModes: [
					BMAP_DRAWING_CIRCLE,
					BMAP_DRAWING_RECTANGLE,
					BMAP_DRAWING_POLYLINE,
					BMAP_DRAWING_POLYGON
				]
			},
			circleOptions: styleOptions, //圆的样式  
			polylineOptions: styleOptions, //线的样式  
			polygonOptions: styleOptions, //多边形的样式  
			rectangleOptions: styleOptionsGree //矩形的样式  
		});

		drawingManager.addEventListener('overlaycomplete', function(e) {
			//关闭画图
			drawingManager.close();
			//获取所画图形类型
			var drawingModeType = e.drawingMode;
			var num = 0;
			//判断所画区域车辆数
			dataInfo.forEach(function(value) {
				var point = new BMap.Point(value.longitude, value.latitude);
				if(drawingModeType == "circle") {
					if(BMapLib.GeoUtils.isPointInCircle(point, e.overlay)) {
						num++;
					}

				} else if(drawingModeType == "rectangle") {

					if(BMapLib.GeoUtils.isPointInPolygon(point, e.overlay)) {
						num++;
					}
				}

			});

			//获取圆半径,中心点
			if(drawingModeType == "circle") {
				console.log("圆心坐标 --- " + e.overlay.getCenter().lng + " --- " + e.overlay.getCenter().lat);
				console.log("圆半径 --- " + e.overlay.getRadius() + "(米) ");
				console.log("圆面积 --- " + e.calculate);

			} else if(drawingModeType == "rectangle") {
				//获取矩形坐标
				var path = e.overlay.getPath();
				console.log("左上角坐标 --- " + path[0].lng + " --- " + path[0].lat);
				console.log("右上角坐标 --- " + path[1].lng + " --- " + path[1].lat);
				console.log("右下角坐标 --- " + path[2].lng + " --- " + path[2].lat);
				console.log("左下角坐标 --- " + path[3].lng + " --- " + path[3].lat);
				console.log("矩形面积 --- " + e.calculate);
			} else if(drawingModeType == "polygon") { //画多边形
				var path = e.overlay.getPath();
				path.forEach(function(value, index) {
					console.log("第" + (index + 1) + "次坐标为:" + value.lng + " --- " + value.lat);
				});
				//获取多边形面积    偶尔会出现O,不太清楚那里有问题
				console.log("多边形形面积 --- " + e.calculate);
			} else if(drawingModeType == "polyline") { //画线条
				var path = e.overlay.getPath();
				path.forEach(function(value, index) {
					console.log("第" + (index + 1) + "次坐标为:" + value.lng + " --- " + value.lat);
				});
				//计算两点距离   画线时每条线条长度
				var distance = BMapLib.GeoUtils.getDistance(new BMap.Point(path[0].lng, path[0].lat), new BMap.Point(path[1].lng, path[1].lat));
				console.log("第一条线条长度 -- " + distance + "(米)");
				console.log("线条总长度 --- " + e.calculate + "(米)");
			}

			drawingModeType = drawingModeType == "circle" ? "圆" : "矩形";
			document.getElementById("carInfo").innerHTML = drawingModeType + "区域总共有" + num + "车";

		});

		//地图根据坐标解析地址 
		var geoc = new BMap.Geocoder();
		var pt = new BMap.Point(108.85529, 34.19704);
		geoc.getLocation(pt, function(rs) {
			var addComp = rs.addressComponents;
			console.log("省份:" + addComp.province + ",城市:" + addComp.city + ",区县: " + addComp.district + ",街道: " + addComp.street + ",街道编号:" + addComp.streetNumber);
		});

		//地图根据地址转换坐标
		geoc.getPoint("西安市雁塔区北山门村", function(point) {
			console.log("坐标为:" + point.lng + "," + point.lat);
			//将转换的点,添加到地图上
			/*if(point) {
				map.centerAndZoom(point, 16);
				map.addOverlay(new BMap.Marker(point));
			} else {
				alert("您选择地址没有解析到结果!");
			}*/
		}, "西安市");
	}

	//添加车辆到地图
	function addCarInfo() {
		dataInfo.forEach(function(value) {
			//更改地图默认点为小汽车
			var myIcon = new BMap.Icon("img/redcar.png", new BMap.Size(23, 23));
			var marker = new BMap.Marker(new BMap.Point(value.longitude, value.latitude), {
				icon: myIcon
			});
			marker.addEventListener("click", function(e) {
				openDataInfo(value, e);
			});
			map.addOverlay(marker);
		});
	}

	//点击地图车辆打开详细信息
	function openDataInfo(car, e) {
		//窗口信息设置
		var opts = {
			width: 250, // 信息窗口宽度
			height: 80, // 信息窗口高度
			title: "车辆信息", // 信息窗口标题
			enableMessage: true //设置允许信息窗发送短息
		};
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow("<div style='width:400px;higth:300px;'>" + car.name + "</div>", opts); // 创建信息窗口对象 
		map.openInfoWindow(infoWindow, point); //开启信息窗口
	}
</script>

展开阅读全文

没有更多推荐了,返回首页