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

最新推荐文章于 2022-05-08 14:45:00 发布

w宁静致远

最新推荐文章于 2022-05-08 14:45:00 发布

阅读量158

点赞数

分类专栏：百度地图

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

版权

百度地图专栏收录该内容

4 篇文章 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/mapPointMark.js"></script>
<script src="js/demo.js"></script>

2、demo.js

var marker_icon = new BMap.Icon(cms.util.uiServicePath + "/images/fac/point_icon.png", new BMap.Size(23, 25)); // 标注点图标
var _place = "杭州市"; 
var have_address = true; // 是否需要显示经纬度转换后的地址，true是 false 否 $("#MarkerAddress")
var have_lnglat = true; // 是否需要显示经纬度，true是 false 否  $("#MarkerLngLat")
var zoom = 16; // 默认缩放层级
var baidu_lng = ""; // 查看详情时赋值
var baidu_lat = ""; // 查看详情时赋值

3、mapPointMark.js

// 当前js可用于百度地图单个点的页面,以下变量根据实际情况进行赋值
/* var marker_icon = new BMap.Icon(cms.util.uiServicePath + "/images/fac/point_icon.png", new BMap.Size(23, 25)); // 标注点图标
var _place = "杭州市"; 
var have_address = true; // 是否需要显示经纬度转换后的地址，true是 false 否 $("#MarkerAddress")
var have_lnglat = true; // 是否需要显示经纬度，true是 false 否  $("#MarkerLngLat")
var zoom = 16; // 默认缩放层级
var baidu_lng = ""; // 查看详情时赋值
var baidu_lat = ""; // 查看详情时赋值 */

// 调整窗体大小
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);
}

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

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

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

//绘画回调函数
var _overlay =null;
var overlaycomplete = function (e) {
    if(_overlay !=null){
        map.removeOverlay(_overlay);
    }
    e.overlay.enableDragging();
    var point = new BMap.Point(e.overlay.getPosition().lng, e.overlay.getPosition().lat);
    _overlay = e.overlay;
	baidu_lng = point.lng;
	baidu_lat = point.lat;
	
	if(have_address){
		getLocation(e.overlay.getPosition().lng,e.overlay.getPosition().lat);
	}
	if(have_lnglat){
		$("#MarkerLngLat").val(e.overlay.getPosition().lng+','+ e.overlay.getPosition().lat);
	}
	
    //移动事件
    e.overlay.addEventListener("dragend", function (e) {
		baidu_lng = this.point.lng;
		baidu_lat = this.point.lat;
		if(have_lnglat){
			$("#MarkerLngLat").val(this.point.lng+','+ this.point.lat);
		}
		if(have_address){
			getLocation(this.point.lng , this.point.lat);
		}
    });
};

// 经纬度转详细地址
function getLocation(lng, lat){
    var point = new BMap.Point(lng, lat);
    var geoc = new BMap.Geocoder();
	geoc.getLocation(point, function(rs) {
		var addComp = rs.addressComponents;
		var address = addComp.district;
		if ("" != addComp.street) {
		    address += addComp.street;
		}
		if ("" != addComp.streetNumber) {
		    address += addComp.streetNumber;
		    if (addComp.streetNumber.indexOf("号") == -1) {
		        address += "号";
		    }
		}
		$("#MarkerAddress").val(address);
	});
}

// 添加地图检索控件
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 != ""){
		map.clearOverlays(); 
		var new_point = new BMap.Point(lng,lat);
		var marker = new BMap.Marker(new_point,{
			icon: marker_icon
		});  // 创建标注
		map.addOverlay(marker); // 将标注添加到地图中
		_overlay = marker;
		map.panTo(new_point);      
		$("#MarkerLngLat").val(lng+','+ lat);
		$("#MarkerAddress").val(address);
		$("#search_key").val(address);
	}
	addDrawingControl();
	$("#tablist").css("display","none");
}

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

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

// 根据经纬度标注点位添加监听事件并设为中心点,没有则以_place为中心
function setMark(baidu_lng,baidu_lat){
	map.clearOverlays(); 
	addDrawingControl();
	if(baidu_lng != "" && baidu_lat != ""){
		var new_point = new BMap.Point(baidu_lng,baidu_lat);
		map.centerAndZoom(new_point, zoom);
		var marker = new BMap.Marker(new_point,{
			icon: marker_icon
		});  // 创建标注
		marker.enableDragging();
		//移动事件
		marker.addEventListener("dragend", function (e) {
			baidu_lng = this.point.lng;
			baidu_lat = this.point.lat;
			if(have_lnglat){
				$("#MarkerLngLat").val(this.point.lng+','+ this.point.lat);
			}
			if(have_address){
				getLocation(this.point.lng , this.point.lat);
			}
		});
		map.addOverlay(marker); // 将标注添加到地图中
		_overlay = marker;
	}else{
		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();
    }
}

效果图

w宁静致远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图-单点覆盖物2(提取公共变量、带搜索)

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...
复制链接

扫一扫

专栏目录