百度地图配色，地址解析（根据经纬度），以及infobox的显隐

最新推荐文章于 2023-07-31 20:24:45 发布

半盏 · 花凋

最新推荐文章于 2023-07-31 20:24:45 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： JavaScript 百度地图配色 infoBox

本文链接：https://blog.youkuaiyun.com/gujian_peachblossom/article/details/92638061

版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

js部分

function Work() {
	this.EngineerPosition = function (s, t, parent) {
		if (parent == "ml") {
			var Info = {
				username: "1",
			}
			Info.parentClass = parent;
			var point = new window.BMap.Point(121.6953518, 31.1926998);
			work.addMarker(point, Info);
		} else if (parent == "kx") {
			var Info = {
				username: "2",
			}
			Info.parentClass = parent;
			var point = new window.BMap.Point(121.4942755, 31.2383954);
			work.addMarker(point, Info);
		}
	}

	this.lastInfoBoxArr = [];
	this.markerFrag = 0;
	/**
	 * 添加标注
	 */
	this.addMarker = function (point, info) {
		var parentClass = info.parentClass;
		var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
			new BMap.Size(23, 25), {
				//指定定位位置
				anchor: new BMap.Size(10, 0),
				//设置图片偏移
				imageOffset: new BMap.Size(0, 0)
			});
		var marker = new BMap.Marker(point, {
			icon: myIcon
		});
		var currentInfoBox = null;
		// var frag=0;
		marker.addEventListener("click", function (e) {
			var html = [];
			work.markerFrag += 1;
			info.frag = work.markerFrag;
			var infoBox = null;
			if (parentClass == "kx") {
				html = ["<div class='kxEngInfo'>" + info.username + "</div>"];
				infoBox = new BMapLib.InfoBox(bdmap, html.join(""), {
					boxStyle: {
						backgroundColor: "#fff",
						width: "150px",
						height: "100px"
					},
					closeIconUrl: "../../img/customer/closeWorkOrder.png",
					closeIconMargin: "10px 10px 0 0",
					align: INFOBOX_AT_TOP
				});

			} else if (parentClass == "ml") {
				html = ["<div class='mlEngInfo'>" + info.username + "</div>"];
				infoBox = new BMapLib.InfoBox(bdmap, html.join(""), {
					boxStyle: {
						backgroundColor: "#fff",
						width: "150px",
						height: "100px"
					},
					closeIconUrl: "../../img/customer/closeWorkOrder.png",
					closeIconMargin: "10px 10px 0 0",
					align: INFOBOX_AT_TOP

				});
			}
			// 点击下一个，上一个隐藏
			work.lastInfoBoxArr.push(infoBox);
			if (work.lastInfoBoxArr.length > 1) {
				$(work.lastInfoBoxArr[0].ba).hide();
				work.lastInfoBoxArr.splice(work.lastInfoBoxArr[0], 1);
			}
			infoBox.open(marker);

			// 点击空白隐藏infoBox
			$(infoBox.ba).addClass("info" + info.frag);
			currentInfoBox = infoBox.ba.classList[1];
			if (infoBox._isOpen) {
				$("html").unbind("click");
				$("html").click(function (e) {
					if (e.target.className != "BMap_Marker BMap_noprint") {
						if (!$(e.target).parents().hasClass(currentInfoBox)) {
							$("." + currentInfoBox).hide() //如果不是，对应的隐藏区域隐藏
						}
					}
				});
			}
		})
		bdmap.addOverlay(marker);
		return marker;
	}
	/**
	 * 将经纬度解析成详细地址
	 */
	this.analyticalLongAndLai = function (lng, lat) {
		//lng 0-180
		//lat 0-90
		var str;
		var point = new BMap.Point(lng, lat);
		bdmap.centerAndZoom(point, 12);
		var geoc = new BMap.Geocoder();
		geoc.getLocation(point, function (rs) {
			var addComp = rs.addressComponents;
			str = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
			$(".address").html("地理位置 : " + str);
			$(".address").attr("title", str);
		});
	}
	//地图配色Json
	this.mapStyle = function () {
		var data = [];
		$.ajax({
			type: "get",
			url: "../assets/map/custom_map_config.json",
			async: false,
			success: function (retData) {
				data = retData;
				return data;
			},
			error: function (retData) {
				console.log(retData);
			}
		});
		return data;
	}
}

$(function () {
	work = new Work();
	//初始化百度地图
	bdmap = new BMap.Map("allmap");
	bdmap.centerAndZoom("上海", 11);
	bdmap.enableScrollWheelZoom(true);
	setTimeout(function () {
		try {
			bdmap.setMapStyleV2({
				styleJson: work.mapStyle()
			})
		} catch (e) {
			//TODO handle the exception
			setTimeout(function () {
				bdmap.setMapStyleV2({
					styleJson: work.mapStyle()
				})
			}, 100)
		}
	}, 300)
});

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>测试</title>
		<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
		<link rel="stylesheet/less" href="css/customer.less">
	</head>
	<body>
		<!--内容-->
		<div class="content customer-content">
			<div id="allmap"></div>
			<div class="conLeft">
				<div class="conLeft-left">
					<div class="panel-group engineerStatus" id="accordion">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4 class="panel-title kx" data-value="1">
				                <a class="es" data-toggle="collapse" data-parent="#accordion" data-value="1" href="#collapseOne">测试1</a>
				            </h4>
							</div>
							<div id="collapseOne" class="panel-collapse collapse">
								<div class="panel-body">
									<ul class="listul-kx">
                                        <li onclick="work.EngineerPosition('','','kx')"><span>1</span></li>
                                        <li onclick="work.EngineerPosition('','','kx')"><span>2</span></li>
                                    </ul>
								</div>
							</div>
						</div>
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4 class="panel-title ml" data-value="2">
				                <a class="es" data-toggle="collapse" data-parent="#accordion" data-value="2" href="#collapseTwo">测试2</a>
				            </h4>
							</div>
							<div id="collapseTwo" class="panel-collapse collapse">
								<div class="panel-body">
									<ul class="listul-ml">
                                        <li onclick="work.EngineerPosition('','','ml')"><span>3</span></li>
                                        <li onclick="work.EngineerPosition('','','ml')"><span>4</span></li>
                                    </ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="conLeft-right">
					<ul class="listt"></ul>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="assets/jquery-3.1.1.js"></script>
		<script src="assets/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/less/less.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=DpiBjyby18B4CxhMl4AaX03zheXl8B2h&coord_type=bd09ll"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
		<script src="assets/map/InfoBox_min.js"></script>
		<script src="js/customer.js"></script>
	</body>
</html>

less部分

.content {
    width: 100%;
    height: 800px;
    position: relative;
    #allmap {
        width: 100%;
        height: 100%;
        z-index: 1;
        /* 去除百度地图右下角的logo和文字 */
        .BMap_cpyCtrl {
            display: none;
        }
        .anchorBL {
            display: none;
        }
        .BMap_Marker {
            background-size: 100%;
        }
    }
    .conLeft {
        position: absolute;
        z-index: 500;
        top: 40px;
        left: 18px;
        width: 259px;
        .conLeft-left {
            float: left;
            width: 127px;
           
            #accordion {
                padding: 0;
                background: none;
                margin-bottom: 0;
                .panel {
                    margin-top: 0;
                    background: none;
                    border-radius: 0;
                    .panel-heading {
                        width: 127px;
                        height: 34px;
                        padding: 0;
                        border-radius: 0;
                        .panel-title {
                            width: 100%;
                            height: 100%;
                            a {
                                display: block;
                                width: 100%;
                                height: 100%;
                                text-align: center;
                                line-height: 34px;
                                color: #F2F2F2;
                                font-size: 12px;
                                transform: all 1s;
                                text-decoration: none;
                                &:before {
                                    content: "";
                                    display: inline-block;
                                    vertical-align: middle;
                                    width: 17px;
                                    height: 22px;
                                    margin-right: 8px;
                                }
                            }
                        }
                    }
                    .panel-collapse {
                        width: 100%;
                        .panel-body {
                            width: 100%;
                            height: 165px;
                            padding: 0;
                            background: #EDF6FA;
                           
                            .listul-kx,
                            .listul-ml{
                                width: 100%;
                                li {
                                    width: 100%;
                                    height: 32px;
                                    border-bottom: 1px solid #E6EFF2;
                                    list-style: none;
                                    span {
                                        float: left;
                                        height: 100%;
                                        font-size: 12px;
                                        color: black;
                                        cursor: pointer;
                                        line-height: 32px;
                                        width: 100px;
                                        text-align: left;
                                        padding-left: 10px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap
                                    }
                                   
                                }
                            }
                        }
                       
                    }
                }
                .panel:nth-child(1) {
                    .panel-heading {
                        background: #fff;
                        // border: 1px solid rgba(79, 182, 212, 1);
                        border-radius: 5px 5px 0 0;
                        .panel-title{
                            a{
                                color: black;
                            }
                        }
                        
                    }
                }
                .panel:nth-child(2) {
                    .panel-heading {
                        background: #fff;
                        // border: 1px solid rgba(227, 143, 61, 1);
                        .panel-title{
                            a{
                                color: black;
                            }
                        }
                    }
                }
               
            }
        }
        .conLeft-right::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 5px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 156px;
        }
        .conLeft-right::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 5px;
            background: #dbdbdb;
        }
        .conLeft-right::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            border-radius: 6px;
            background: #EDF6FA;
        }
    }
  
}


.kxEngInfo,
.mlEngInfo {
    width:150px;
    height:100px;
    background:rgba(53,182,148,1);
    border-radius:3px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 32px;
    margin: 0 auto;
    padding: 0;
}