使用百度地图api,制作区块地图

PS:注意修改"你的key",可以用于画地图图层,集成了方便快捷的画图取点功能。

还有获取地图和公司信息在地图上标点。

jdzmap

<!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{width:100%;height:100%;}
		p{margin-left:5px; font-size:14px;}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的key"></script>
	<script type="text/javascript" src="//api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
	<script type="text/javascript" src="js/lib/jquery-1.11.3.min.js"></script>
	
	<title>设置地图显示范围</title>
</head>
<body>
	<div id="allmap"></div>
	<!-- 这里可以改成显示,用于获取描点获取地图经纬度信息 -->
	<div id="control" style="display:none">
		<div id="info"></div>
		<button onclick = "ctcyzxsj.enableEditing();ctcyzxsj.enableEditing();">开启线、面编辑功能</button>
		<button onclick = "ctcyzxsj.disableEditing();ctcyzxsj.disableEditing();">关闭线、面编辑功能</button>
		<p><input id="startBtn" type="button" onclick="startTool();" value="开启取点工具" /><input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p>
	</div>
</body>
</html>
<script type="text/javascript">
	//百度地图API功能	
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(117.122266,29.267073), 14);
	//鼠标滚动
	//map.enableScrollWheelZoom();
	var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 左上角,添加比例尺
	var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
	map.addControl(top_left_control);        
	//map.addControl(top_left_navigation);     
	map.addControl(top_right_navigation);  
	
	/** 自动回到当前地点
	var b = new BMap.Bounds(new BMap.Point(117.171834,29.277363),new BMap.Point(117.171834,29.277363));
	try {	
		BMapLib.AreaRestriction.setBounds(map, b);
	} catch (e) {
		alert(e);
	}**/
	
	/** 行政区域地图图层
	var bdary = new BMap.Boundary();
	bdary.get("景德镇市昌江区", function(rs){       //获取行政区域
		map.clearOverlays();        //清除地图覆盖物       
		var count = rs.boundaries.length; //行政区域的点有多少个
		if (count === 0) {
			alert('未能获取当前输入行政区域');
			return ;
		}
		var pointArray = [];
		for (var i = 0; i < count; i++) {
			var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
			map.addOverlay(ply);  //添加覆盖物
			pointArray = pointArray.concat(ply.getPath());
		}    
		map.setViewport(pointArray);    //调整视野   
	}); **/
	
	var myGeo = new BMap.Geocoder();
	// 将地址解析结果显示在地图上,并调整地图视野
	function addMarkerByAdds(adds,cpname){
		myGeo.getPoint(adds, function(point){
			if (point) {
				var marker = new BMap.Marker(point)
				map.addOverlay(marker);
				
				var opts = {
				  width : 250,     // 信息窗口宽度
				  height: 100,     // 信息窗口高度
				  title : cpname , // 信息窗口标题
				  enableMessage:true,//设置允许信息窗发送短息
				  message:""
				}
				var infoWindow = new BMap.InfoWindow("地址:"+adds, opts);  // 创建信息窗口对象 
				marker.addEventListener("click", function(){          
					map.openInfoWindow(infoWindow,point); //开启信息窗口
				});
			}
			/**else{
				alert("您选择地址没有解析到结果!");
			}**/
		}, "景德镇市");
	}
	
	
	var jsonStr = {};
	//jsonStr.import = "是";
	
	//JSON.parse(jsonStr)
	//JSON.stringify(data ? data : {})
	
	//获取地址信息
	var url ="/MPKK/runtime/__4svxZB6wTFsmrRt1bch/views/__D8y6wQsGrYkd963XdXB/documents?parentId=&sortCol=&sortStatus=&_currpage=1&lines=30&treedocid=&parentNodeId=&_docid=&_fieldid=&isRelate=&startDate=&endDate=";
	var jqxhr = $.ajax(url, {
			type: 'post',
			dataType: 'json',
			contentType: 'application/json',
			data: JSON.stringify(jsonStr), 
			success: function(data){
				data.data.data.forEach(function(value,index,array){
					var cpname = value.items.__7VtfDtVUCollekf4LIH.value;
					var adds = value.items.__9N5RQPQP67GW2PDHoHu.value;
					//地址和公司名称
					addMarkerByAdds(adds,cpname);
				})
			},
			error : function() { 
			//alert("error"); 
			}
		});
	/**var jqxhr = $.post("","",function(data) {
		//alert("success");
    }).success(function() { 
		//alert("second success"); 
	}).error(function() { 
		//alert("error"); 
	}).complete(function(){ 
		//alert("complete"); 
	});
	
    // 为上面的请求设置另一个完成函数
    jqxhr.complete(function(){ 
		//alert("second complete"); 
	});**/
	
	//现代服务提升区
	var xdfwtsq = new BMap.Polygon([
		new BMap.Point(117.119751,29.276021),
		new BMap.Point(117.144544,29.273438),
		new BMap.Point(117.161504,29.274257),
		new BMap.Point(117.176272,29.274635),
		new BMap.Point(117.16675,29.26764),
		new BMap.Point(117.163517,29.270035),
		new BMap.Point(117.147994,29.270224),
		new BMap.Point(117.144616,29.266758),
		new BMap.Point(117.141095,29.265545),
		new BMap.Point(117.132651,29.268775),
		new BMap.Point(117.11702,29.264805),
		new BMap.Point(117.110481,29.267829)
	], { strokeColor:"#ffac38",    //边线颜色。
        fillColor:"#ffac38",      //填充颜色。当参数为空时,圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度,以像素为单位。
        strokeOpacity: 0.8,       //边线透明度,取值范围0 - 1。
        fillOpacity: 0.2,      //填充的透明度,取值范围0 - 1。
        strokeStyle: 'dashed' //边线的样式,solid或dashed。
	});   
	map.addOverlay(xdfwtsq);
	
	
	
	
	var point = new BMap.Point(117.130611,29.241872);
	var opts = {
	  position : point,    // 指定文本标注所在的地理位置
	  offset   : new BMap.Size(0, 0)    //设置文本偏移量
	}
	//跳转到列表查看区域内公司信息
	var label = new BMap.Label("这片是:重型直升机生产配套区,点击连接查看<a href='/good/html/view.html?appId=__4svxZB6wTFsmrRt1bch&viewId=__D8y6wQsGrYkd963XdXB&opentarget=detail&containTitle=%E4%BC%81%E4%B8%9A%E4%BF%A1%E6%81%AF' target='_blank'>[更多信息]</a>", opts);  // 创建文本标注对象
		label.setStyle({
			 color : "#000",
			 fontSize : "16px",
			 height : "20px",
			 lineHeight : "20px",
			 fontFamily:"微软雅黑"
		 });
	map.addOverlay(label);  
	
	
	var key = 1;    //开关
	var newpoint;   //一个经纬度
	var points = [];    //数组,放经纬度信息
	var polyline = new BMap.Polyline(); //折线覆盖物

	function startTool(){   //开关函数
		if(key==1){
			document.getElementById("startBtn").style.background = "green";
			document.getElementById("startBtn").style.color = "white";
			document.getElementById("startBtn").value = "开启状态";
			key=0;
		}else{
			document.getElementById("startBtn").style.background = "red";
			document.getElementById("startBtn").value = "关闭状态";
			key=1;
		}
	}
	
	map.addEventListener("click",function(e){   //单击地图,形成折线覆盖物
		newpoint = new BMap.Point(e.point.lng,e.point.lat);
		if(key==0){
			points.push(newpoint);  //将新增的点放到数组中
			polyline.setPath(points);   //设置折线的点数组
			map.addOverlay(polyline);   //将折线添加到地图上
			document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),</br>";    //输出数组里的经纬度
		}
	});
	map.addEventListener("dblclick",function(e){   //双击地图,形成多边形覆盖物
		if(key==0){
			map.disableDoubleClickZoom();   //关闭双击放大
			var polygon = new BMap.Polygon(points);
			map.addOverlay(polygon);   //将折线添加到地图上
		}
	});
</script>

更多示例请查看:百度地图示例