百度地图-区域覆盖物(提取公共变量、带搜索)

最新推荐文章于 2023-03-14 10:47:19 发布

w宁静致远

最新推荐文章于 2023-03-14 10:47:19 发布

阅读量463

点赞数

分类专栏：百度地图前端demo

本文链接：https://blog.csdn.net/wsh_ningjing/article/details/115483482

版权

百度地图同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端demo

3 篇文章 0 订阅

订阅专栏

1、demo.html

<!DOCTYPE html>
<html>
<head>
 
</head>
<body>
 
	<!-- 修改弹窗 -->
	<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="addLabel">
		<div class="modal-dialog" role="document" id="modaladd">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="addLabel"></h4>
				</div>
				<div class="modal-body" style="height: 100%;width:100%;padding: 2px;display: flex;">
					<div id="divTable">
						<table width="100%" border="0" cellspacing="5" cellpadding="0" style="margin-bottom:0px;border-collapse:separate;border-spacing:10px;">
 
						</table>
					</div>
					<div id="divMap" style="position:relative;">
						<div id="map_search" class="col-xs-4" style="position:absolute; top:12px; left:40px; z-index: 999;">
							<div class="col-xs-8">
								<input id="search_key" class="form-control" autocomplete="off"></input>
							</div>
							<div class="col-xs-4" style="padding-left: 0px;">
								<button id="mapsearch" type="button" class="btn btn-info" onclick="mapsearch();">搜索</button>
							</div>
						</div>
						<div id = "r-result" style="position: absolute;z-index: 999;left: 70px;top: 40px;">
							<ul id="tablist" style="list-style-type:none;padding-left: 10px;">
							</ul>
						</div>
						<div id="mapContent" style="width: 100%;height: 100%;"></div>
					</div>
				</div>
				<div class="modal-footer"  style="padding:5px;">
				    <button type="button" class="btn btn-default" data-dismiss="modal">取消<i class="ico ico-right fa fa-close"></i></button>
				    <button type="button" class="btn btn-primary" onclick="return saveData();">保存<i class="ico ico-right fa fa-save"></i></button>
				</div>
	        </div>
	    </div>
	</div>
	
</body>
</html>
 
<script src="js/mapAreaMark.js"></script>
<script src="js/demo.js"></script>

2、demo.js

// 当前js可用于百度地图单个点的页面,以下变量根据实际情况进行赋值
var _place = "杭州市"; 
var _points = []; // 点位
var zoom = 16; // 默认缩放层级



// 根据点位反显区域
showPoints(result.points);

3、mapAreaMark.js

// 当前js可用于百度地图单个点的页面,以下变量根据实际情况进行赋值
/* var _place = "杭州市"; 
var _points = [];
var zoom = 16; // 默认缩放层级 */

// 调整窗体大小
function inincontent(){
	$("#modaladd").attr("style", "height:" + ($(window).height() - 50) + "px;" + "width:" + ($(window).width()-20) + "px;margin:10px 0 0 10px;");
    $("#divTable").attr("style", "max-height:" + ($("#modaladd").height() - 80) + "px;overflow-y:auto;");
	$("#divMap").height($("#modaladd").height()-80);
	$("#divMap").width($("#modaladd").width()-290);
}

window.onresize = function(){
	inincontent();
};

// 初始化地图
$(function () {
	inincontent();
	initMap();
});

var map;
function initMap(){
    map = new BMap.Map("mapContent",{enableMapClick:false}); // enableMapClick:false 关闭地图可点功能
    map.centerAndZoom(_place, zoom);
    setMapEvent();
    addDrawingControl();
}

// 地图事件设置函数：
function setMapEvent() {
    map.enableDragging();   // 开启拖拽
    map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
    map.enableKeyboard(); //启用键盘上下左右键移动地图
    map.disableDoubleClickZoom(); // 关闭鼠标双击放大

    //向地图中添加缩放控件
    var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
    map.addControl(ctrl_nav);
	// 添加清除区域控件
	addClearControl();
}

var drawingControl = null;
function addClearControl(){
	function ZoomControl() {
	    // 设置默认停靠位置和偏移量
	    this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
	    this.defaultOffset = new BMap.Size(121, 5);
	}
	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl.prototype = new BMap.Control();
	
	ZoomControl.prototype.initialize = function (map) {
	    // 创建一个DOM元素
	    var div = document.createElement("div");
	    // 添加文字说明
	    div.appendChild(document.createTextNode(""));
	    // 设置样式
	    div.style.width = "48px";
	    div.style.right = "121px";
	    div.style.boxShadow="1px 1px 3px rgba(0,0,0,0.3)";
	    div.style.height = "37px";
	    div.style.cursor = "pointer";
	    div.style.border = "1px solid rgb(180, 180, 180)";
	    div.style.backgroundColor = "white";
	    div.style.background = "url("+cms.util.uiServicePath+"/images/but/clear.png) no-repeat";
	    div.title = "清除";
	    div.id = "divClear";
	    // 绑定事件，点击一次放大两级
	    div.onclick = function (e) {
	    	_points = [];
	        _overlay = null;
	        drawingControl.close();
	        map.clearOverlays();
	        drawingControl.open();
	    }
	    // 添加DOM元素到地图中
	    map.getContainer().appendChild(div);
	    // 将DOM元素返回
	    return div;
	}
	// 创建控件实例并添加到地图当中
	var myZoomCtrl = new ZoomControl();
	map.addControl(myZoomCtrl);
}

//地图控件添加函数：
function addDrawingControl() {
    var styleOptions = {
		strokeColor: "blue",    //边线颜色。
		fillColor: "blue",      //填充颜色。当参数为空时，圆形将没有填充效果。
		strokeWeight: 3,       //边线的宽度，以像素为单位。
		strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
		fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
		strokeStyle: 'solid' //边线的样式，solid或dashed。
    }

    //向地图添加绘制工具
    drawingControl = new BMapLib.DrawingManager(map, {
		isOpen: true, //是否开启绘制模式
		enableDrawingTool: true, //是否显示工具栏
		enableCalculate: false,
		drawingToolOptions: {
		    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
		    offset: new BMap.Size(5, 5), //偏离值
		    scale: 0.8, //工具栏缩放比例
		    drawingModes: [BMAP_DRAWING_POLYGON]
		},
        polygonOptions: styleOptions //多边形的样式
    });

    //默认绘制区域
    drawingControl.setDrawingMode(BMAP_DRAWING_POLYGON);
    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingControl.addEventListener('overlaycomplete', overlaycomplete);
}

//绘画回调函数
var _overlay =null;
var overlaycomplete = function (e) {
	if(_overlay != null){
	    swal("不可添加多个路线/区域！");
		map.removeOverlay(e.overlay);
	    return false;
	}
	_overlay = e.overlay;
	var arrs = [];
	e.overlay.enableEditing();
	arrs = e.overlay.getPath();
	_points = arrs;
	drawingControl.setDrawingMode();
	// showWindowView(_toiId,arrs);
	//更新事件
	e.overlay.addEventListener("lineupdate",
		function () {
			var arrs =[];
			this.enableEditing();
			arrs=this.getPath();
			// showWindowView(_toiId,arrs);
			_points = arrs;
			_overlay = e.overlay;
		}
	);
};

// 添加地图检索控件
function mapsearch(){
	$("#tablist").find("li").remove();
	$("#tablist").css("display","block");
	var key =  $("#search_key").val();
	var options = {      
	    onSearchComplete: function(results){      
	        if (local.getStatus() == BMAP_STATUS_SUCCESS){
				// $("#r-result").attr("style","display:block;")
	            // 判断状态是否正确      
	            for (var i = 0; i < results.getCurrentNumPois(); i ++){
					if(i < 7){ // 只取前七条数据
						var poi = results.getPoi(i);
						if(i%2==0){
								document.getElementById("tablist").innerHTML+=
								'<li style="background-color:lihghtblue;cursor: pointer;" onclick="setSearchMark(\'' + poi.point.lat+'\',\'' + poi.point.lng + '\',\'' + poi.address + '\');"><a class="text-info" style="font-size:8px">' + poi.title+'</a><br><span style="font-size:8px">地址:' + poi.address + '</span></li>';
						}else{
							document.getElementById("tablist").innerHTML+=
							'<li  style="background-color:lihghtgreen;cursor: pointer;" onclick="setSearchMark(\'' + poi.point.lat+'\',\'' + poi.point.lng + '\',\'' + poi.address + '\');"><a class="text-info" style="font-size:8px">' + poi.title+'</a><br><span style="font-size:8px">地址:' + poi.address + '</span></li>';
						}
					}
	            }      
				document.getElementById("r-result").style.backgroundColor="#fff"
	        }      
	    }      
	 };      
	var local = new BMap.LocalSearch(map, options); 
	local.search(key);
}

function setSearchMark(lat,lng,address){
	if(lng != "" && lat != ""){
		var new_point = new BMap.Point(lng,lat);
		map.panTo(new_point);      
		$("#search_key").val(address);
	}
	addDrawingControl();
	$("#tablist").css("display","none");
}

$('#add').on('hide.bs.modal', function () {
    $("#tablist").css("display","none");
	$("#search_key").val("");
	map.clearOverlays();
	_overlay = null;
});

// 当模态框对用户可见时触发
$('#add').on('shown.bs.modal', function () {
    setMark();
});

// 设_place为中心点
function setMark(){
	if(_overlay != null){
		_overlay.addEventListener("lineupdate", function (el) {
		    var arrs =[];
		    this.enableEditing();
		    arrs=this.getPath();
			_points = arrs;
		    _overlay = this;
		});
		map.addOverlay(_overlay);
		_overlay.enableEditing();
		
		var points = _overlay.getPath();
		map.centerAndZoom(points[0], zoom);
		_points = points;
	}else{
		map.clearOverlays();
		addDrawingControl();
		map.centerAndZoom(_place, zoom);
	}
}

// enter键回车触发搜索按钮
document.onkeydown = function (e) {
    var theEvent = window.event || e;
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code == 13) {
		$('#mapsearch').click();
    }
}

// 反显区域
function showPoints(points){
	var overlayspoint = [];
	if(points != null && points.length > 0){
	    for(var i = 0; i < points.length; i++){
	        overlayspoint.push(new BMap.Point(points[i].lng, points[i].lat));
	    }
	    var polygon = new BMap.Polygon(overlayspoint, {
	        strokeColor: "blue",
	        fillColor: "blue",
	        strokeWeight: 3,
	        strokeOpacity: 0.8,
	        fillOpacity: 0.6,
	        strokeStyle: 'solid'
	    });
	    _overlay = polygon;
	}
}