百度地图自定义相关实现

最新推荐文章于 2024-09-10 22:55:28 发布
离别又见离别
最新推荐文章于 2024-09-10 22:55:28 发布
阅读量439
点赞数
文章标签： css javascript 前端 html
本文链接：https://blog.csdn.net/weixin_43861630/article/details/108980912
版权
实现了自定义区域颜色，百度搜索样式，点击tab(200、300等标签)，跳转页面，及其它点击事件
<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#r-result{
		position: absolute;
		top:119px;
		/*height: 300px!important;*/
		left: 100px;
	}
	.map_inp{
		position: absolute;
		top: 80px;
		left: 100px;
	}
	#suggestId {
	    box-sizing: border-box;
	    border: 0;
	    padding: 9px 0;
	    border-left: 10px solid transparent;
	    border-right: 27px solid transparent;
	    line-height: 20px;
	    font-size: 16px;
	    height: 38px;
	    color: #333;
	    position: relative;
	    border-radius: 2px 0 0 2px;
		width: 329px;
		outline: none;
		float: left;
	}
	#search-button {
	    pointer-events: auto;
	    background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/searchbox_5c0d97d.png) no-repeat 0 -76px #3385ff;
	    width: 57px;
	    height: 38px;
	    float: left;
	    border: 0;
	    padding: 0;
	    cursor: pointer;
	    border-radius: 0 2px 2px 0;
	    box-shadow: 1px 2px 1px rgba(0,0,0,.15);
		
	}
	div#r-result > div {
		width: 388px;
		border: 1px solid #3385ff!important;
		background: #FFF;
	}
	div#r-result > div >div li>div {
	    background: #FFF!important;
	}
	div#r-result > div >div {
	    background: #FFF!important;
	}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=百度申请的ak"></script>
	
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="r-result"></div>
	<div class="map_inp">
		<input type="text" id="suggestId" size="20" value=""  placeholder="搜地点、查公交、找路线"/>
		<button id="search-button" data-title="搜索" data-tooltip="2" onclick="getList()"></button>
	</div>
	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	
</script>
<script type="text/javascript">
	function G(id) {
		return document.getElementById(id);
	}
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.280190, 40.049191), 19);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	  // 添加带有定位的导航控件
	  var navigationControl = new BMap.NavigationControl({
	    // 靠左上角位置
	    anchor: BMAP_ANCHOR_TOP_LEFT,
	    // LARGE类型
	    type: BMAP_NAVIGATION_CONTROL_LARGE,
	    // 启用显示定位
	    enableGeolocation: true
	  });
	  map.addControl(navigationControl);
	  // 添加定位控件
	  var geolocationControl = new BMap.GeolocationControl();
	  geolocationControl.addEventListener("locationSuccess", function(e){
	    // 定位成功事件
	    var address = '';
	    address += e.addressComponent.province;
	    address += e.addressComponent.city;
	    address += e.addressComponent.district;
	    address += e.addressComponent.street;
	    address += e.addressComponent.streetNumber;
	    //alert("当前定位地址为：" + address);
	  });
	  geolocationControl.addEventListener("locationError",function(e){
	    // 定位失败事件
	    //alert(e.message);
	  });
	  map.addControl(geolocationControl);
	  var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
	  		{"input" : "suggestId"
	  		,"location" : map
	  	});
	  
	  	ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	  	var str = "";
	  		var _value = e.fromitem.value;
	  		var value = "";
	  		if (e.fromitem.index > -1) {
	  			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	  		}    
	  		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
	  		
	  		value = "";
	  		if (e.toitem.index > -1) {
	  			_value = e.toitem.value;
	  			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	  		}    
	  		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
	  		G("searchResultPanel").innerHTML = str;
	  	});
	  //var myValueVal = document.getElementById("suggestId").value;
	  	var myValue;
	  	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	  	var _value = e.item.value;
	  		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	  		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
	  		
	  		setPlace();
	  	});
	  
	  	function setPlace(){
	  		//map.clearOverlays();    //清除地图上所有覆盖物
	  		function myFun(){
	  			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
	  			map.centerAndZoom(pp, 18);
	  			map.addOverlay(new BMap.Marker(pp));    //添加标注
	  		}
	  		/*var local = new BMap.LocalSearch(map, { //智能搜索
	  		  onSearchComplete: myFun
	  		});*/
	  		//local.search(myValue);
			
			var local = new BMap.LocalSearch(map, {
				renderOptions: {map: map, panel: "r-result"}
			});
			local.search(myValue);
	  	}
		function getList(){
			
			//map.clearOverlays();    //清除地图上所有覆盖物
			/*function myFun(){
				var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
				map.centerAndZoom(pp, 18);
				map.addOverlay(new BMap.Marker(pp));    //添加标注
			}*/
			/*var local = new BMap.LocalSearch(map, { //智能搜索
			  onSearchComplete: myFun
			});*/
			//local.search(myValue);
			
			//console.log()
			var local = new BMap.LocalSearch(map, {
				renderOptions: {map: map, panel: "r-result"}
			});
			local.search(document.getElementById("suggestId").value);
		}
			map.enableScrollWheelZoom();
		
			function getBoundary(val,index){       
				var bdary = new BMap.Boundary();
				bdary.get('"德州市'+val+'"', function(rs){       //获取行政区域
					//map.clearOverlays();        //清除地图覆盖物       
					var count = rs.boundaries.length; //行政区域的点有多少个
					if (count === 0) {
						alert('未能获取当前输入行政区域');
						return ;
					}
		          	var pointArray = [];
					var color=["#3385ff","#ff0000","#99CCFF","#6699FF","#0099FF","#FFFFCC","#FFFF00","#FF6699","#CC0099","#0000FF","#33FF33"]
					for (var i = 0; i < count; i++) {
						   /* var ply = new BMap.Polygon(blist[i].points, { 
						                                            strokeWeight: 1,   //边框宽度
						                                           trokeColor: "#014F99",   //边框颜色
						                                           fillColor: " #DDE4F0" //填充颜色
						                                        }); *///建立多边形覆盖物
						var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: color[index],fillColor: color[index]}); //建立多边形覆盖物
						map.addOverlay(ply);  //添加覆盖物
						pointArray = pointArray.concat(ply.getPath());
					}    
					
					//map.setViewport(pointArray);    //调整视野  
					//addlabel();               
				});   
			}
		var List = ["德城区","宁津县","武城县","夏津县","平原县","禹城市","齐河县","临邑县","陵城区","乐陵市","庆云县"]
		map.centerAndZoom(new BMap.Point(116.320135,37.354844), 10);
			setTimeout(function(){
				for(var i=0;i<List.length;i++){
					getBoundary(List[i],i);
				}
			}, 500);
		
			function addlabel() {
			    var pointArray = [
			      new BMap.Point(121.716076,23.703799),
			      new BMap.Point(112.121885,14.570616),
			      new BMap.Point(123.776573,25.695422)];
			    var optsArray = [{},{},{}];
			    var labelArray = [];
			    var contentArray = [
			      "台湾是中国的！",
			      "南海是中国的！",
			      "钓鱼岛是中国的！"];
			    for(var i = 0;i < pointArray.length; i++) {
			      optsArray[i].position = pointArray[i];
			      labelArray[i] = new BMap.Label(contentArray[i],optsArray[i]);
			      labelArray[i].setStyle({
					color : "red",
					fontSize : "12px",
						 height : "20px",
						 lineHeight : "20px",
						 fontFamily:"微软雅黑"
					 });
			      map.addOverlay(labelArray[i]);
			    }	  
			}
			var slList=["200","300","500","200","100","200","250","400","100","264","224"]
			var wdList=["116.051075","116.090169","116.439717","116.35233","116.619091","116.736374","116.865155","116.727175","116.799615","117.179059","117.425123"]
			var jdList=["37.019047","37.238176","37.166431","37.445663","36.939708","36.767831","37.188514","37.364941","37.673597","37.697357","37.788669",]
			function getLabel(val,vul,index){
				var point = new BMap.Point(val,vul);
				//map.centerAndZoom(point, 15);
				var opts = {
				  position : point,    // 指定文本标注所在的地理位置
				  offset   : new BMap.Size(-30, -30)    //设置文本偏移量
				}
				var label = new BMap.Label(index, opts);  // 创建文本标注对象
					label.setStyle({
						 color : "#FFF",
						 fontSize : "12px",
						 height : "20px",
						 lineHeight : "20px",
						 fontFamily:"微软雅黑",
						 border:"0px",
						 background:"#555",
						 borderRadius:"5px",
						 padding:"5px",
						 boxShadow:"3px 3px 5px #888888"
					 });
					 //点击时间
					 label.addEventListener("click",function(e,t){
						 //window.location.href="yrdwgl.html";
						 window.location.href="http://baidu.com";
					 });
				map.addOverlay(label);
			}
			 for(var i=0;i<wdList.length;i++){
				 getLabel(wdList[i],jdList[i],slList[i]);
			 }
				function showInfo(e){
					alert(e.point.lng + ", " + e.point.lat);
				}
				map.addEventListener("click", showInfo);

</script>