百度地图api窗口信息自定义

时间：2021-03-02 15:05:02

百度地图加载完后，完全可以用dom方法操作，比较常用的就是点击mark的弹窗，利用jQuery可以很快的创建弹窗，需要注意的就是地图都是异步加载，所以绑定时间要用

jQuery 事件 - delegate() 方法

原文链接http://www.w3school.com.cn/jquery/event_delegate.asp

#pop为弹窗容器，#info为弹窗信息 将#info设置成绝对定位信息窗就可以流动了

demo

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script>

$(document).ready(function(){

  //#pop为弹窗容器，#info为弹窗信息

		  $("div").delegate("label","click",function(){

	  var of=$(this).offset();

      var x=of.left+5;

      var y=of.top-288;

	  var html ='<div id="info" >' +

      '<img src="http://www.csrcode.cn/Upfile/20121020/2012102030687111.jpg" alt="" />' +

      '<p>地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部</p>' +

    '</div>';

var i=$(this).text();

 $("#test").val(i);

    $("#pop").html(html);

    $("#info").offset({top:y,left:x});

    var t=$("#info").css("info");

    n=t.slice(0,-2)

    if(n<0)

    {

    $("#ling").height(-n);

   	     	}else{ $("#ling").height(0);}

  });

  //$("input").click(function(){

	  $("input").bind("click",function(){

		$("#pop").empty();

		$("#ling").height(0);

	  });

});

</script>

<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;}

#l-map{height:70%;width:78%;float:left;border-right:2px solid #bcbcbc;}

#r-result{height:70%;width:20%;float:left;}

.focus{

    border:1px dotted red;

}

#info

{ background-color: #98bf21;

 color:white;

        font-family:Arial;

      width:380px;

      position: absolute;

  left: 0px;

  top: 0px;

             border:1px dotted red;

        z-index:800;

        padding:5px}

}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GCub0wBwxsakrYyWtj5lTDEh"></script>

<script type="text/javascript" src="http://api.map.baidu.com/library/RichMarker/1.2/src/RichMarker_min.js"></script>>

<script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.2.5.js"></script>

<title>检索用户静态数据</title>

</head>

<body>

<div id="ling"></div>

<p>姓名：<input type="text" id="test" value="米老鼠"></p>

<button>显示值</button>

<div id="l-map"></div>

<div id="r-result">

<input id="type1" type="radio" name="type" value="single" /><label for="type1">精准查找</label>

<input id="type2" type="radio" name="type" value="more" checked="checked" /><label for="type2">模糊查找</label><br />

<input id="show1" type="radio" name="show" value="" checked="checked" /><label for="show1">仅查找到的内容</label>

<input id="show2" type="radio" name="show" value="all"/><label for="show2">显示所有内容</label><br />

<input id="keyword" type="text" style="width:150px;" value="酒店"/>

<input type="button" value="搜索" onclick="search('type','show','keyword')"/>

</div>

<div id="pop"></div>

<div class="pannel-show">

    运行结果：<span id="demo_execute_result"></span>

</div>

</body>

</html>

<script type="text/javascript">

// 百度地图API功能

//  标注点数组

var BASEDATA = [

{title:"奥亚酒店",content:"北苑路169号",point:"116.422792|40.009471",isOpen:1,icon:{w:21,h:21,l:115,t:46,x:1,lb:10}},

{title:"珀丽酒店",content:"将台西路8号",point:"116.484289|39.97936",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"贵国酒店",content:"左家庄1号",point:"116.454494|39.964011",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"科通酒店",content:"民族园路8号院2号楼",point:"116.394601|39.987925",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"将台酒店",content:"酒仙桥路甲12号",point:"116.496024|39.976864",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"成宏酒店",content:"北四环东路惠新东桥西北侧",point:"116.429445|39.995392",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"华商酒店",content:"延静西里2号",point:"116.488962|39.921939",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"标华酒店",content:"北京市 朝阳区红庙路柴家湾1号",point:"116.489284|39.92104",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"万程酒店",content:"天坛路89号",point:"116.411762|39.89457",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"黎昌酒店",content:"永定门外彭庄乙58号",point:"116.393532|39.876272",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"北京图书馆",content:"北京市海淀区白石桥路39号",point:"116.329593|39.952398",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"海淀图书馆",content:"丹棱街16西门",point:"116.315551|39.984388",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"北京图书馆",content:"北京市西城区文津街附近",point:"116.391713|39.929007",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"首都图书馆",content:"东三环南路88号",point:"116.469899|39.87684",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"国家图书馆",content:"中关村南大街33号",point:"116.331292|39.949031",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"崇文区图书馆",content:"北京市崇文区花市大街113号（乐天玛特超市旁）的敕建火德真君庙内",point:"116.427671|39.903568",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"朝阳区图书馆",content:"北京市朝阳区朝外小庄金台里17号",point:"116.47766|39.922295",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"宣武区图书馆",content:"教子胡同8号",point:"116.374561|39.894302",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"东城区图书馆",content:"交道口东大街85号",point:"116.41927|39.9474",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},

{title:"西城区图书馆",content:"北京市西城区后广平胡同26号",point:"116.368099|39.942332",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}

]

//创建和初始化地图函数：

function initMap(){

	window.map = new BMap.Map("l-map");

	map.centerAndZoom(new BMap.Point(116.412318,39.887037),12);

	map.enableScrollWheelZoom();

	map.addControl(new BMap.NavigationControl());

	window.searchClass = new SearchClass();

	searchClass.setData(BASEDATA)

dd = searchClass.search({k:"title",d:"1",t:"more",s:"all"});

	addMarker(dd);//向地图中添加marker

}

window.search = function(name_t,name_s,id_d){

	var t_o = document.getElementsByName(name_t);

	var s_o = document.getElementsByName(name_s);

	var s_v,t_v,d_v = document.getElementById(id_d).value;

	for(var i = 0; i < t_o.length; i++){

		if(t_o[i].checked){

			t_v = t_o[i].value;

		}

	}

	for(var i = 0; i < s_o.length; i++){

		if(s_o[i].checked){

			s_v = s_o[i].value;

		}

	}

	searchClass.trim(t_v) == "" && (t_v = "single");

	var dd = searchClass.search({k:"title",d:d_v,t:t_v,s:s_v});

	addMarker(dd);//向地图中添加marker

}

//创建marker

window.addMarker = function (data){

	map.clearOverlays();

	for(var i=0;i<data.length;i++){

		var json = data[i];

		var p0 = json.point.split("|")[0];

		var p1 = json.point.split("|")[1];

		var point = new BMap.Point(p0,p1);

		 var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});

		var html2 = '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 80px; height: 26px; left: -10px; top: -35px; overflow: hidden;">'

				+     '<img id="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="http://api.map.baidu.com/library/RichMarker/1.2/examples/images/back1.png">'

						+ '</div>'

								+ '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;">'+json.title+'</label>',

								marker = new BMapLib.RichMarker(html2,  point,{

									"anchor" : new BMap.Size(-18, -27),

									"enableDragging" : 0});

									var iw = createInfoWindow(i);

									  map.addOverlay(marker);

									   (function(){

											var _json = json;

											var _iw = createInfoWindow(_json);

											var _marker = marker;

											_marker.addEventListener("click",function(){

												_marker.openInfoWindow(_iw);

											   })

										})()

	}

}

//创建InfoWindow

function createInfoWindow(json){

	var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");

	return iw;

}

//创建一个Icon

function createIcon(json){

	var icon = new BMap.Icon("../img/location.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowAnchor:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})

	return icon;

}

function SearchClass(data){

	this.datas = data;

}

// rule = {k:"title",d:"酒店",s:"all",t:"single"}=>t{single:(key=?),more:(key like[%?%])}//t:{single|more},s{all|!all}

SearchClass.prototype.search = function(rule){

	if(this.datas == null){alert("数据不存在!");return false;}

	if(this.trim(rule) == "" || this.trim(rule.d) == "" || this.trim(rule.k) == "" || this.trim(rule.t) == ""){alert("请指定要搜索内容!");return false;}

	var reval = [];

	var datas = this.datas;

	var len = datas.length;

	var me = this;

	var ruleReg = new RegExp(this.trim(rule.d));

	var hasOpen = false;

	var addData = function(data,isOpen){

		// 第一条数据打开信息窗口

		if(isOpen && !hasOpen){

			hasOpen = true;

			data.isOpen = 1;

		}else{

			data.isOpen = 0;

		}

		reval.push(data);

	}

	var getData = function(data,key){

		var ks = me.trim(key).split(/\./);

		var i = null,s = "data";

		if(ks.length == 0){

			return data;

		}else{

			for(var i = 0; i < ks.length; i++){

				s += '["' + ks[i] + '"]';

			}

			return eval(s);

		}

	}

	for(var cnt = 0; cnt < len; cnt++){

		var data = datas[cnt];

		var d = getData(data,rule.k);

		if(rule.t == "single" && rule.d == d){

			addData(data,true);

		}else if(rule.t != "single" && ruleReg.test(d)){

			addData(data,true);

		}else if(rule.s == "all"){

			addData(data,false);

		}

	}

	return reval;

}

SearchClass.prototype.setData = function(data){

	this.datas = data;

}

SearchClass.prototype.trim = function(str){

	if(str == null){str = "";}else{ str = str.toString();}

	return str.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, "");

}

initMap();//创建和初始化地图

</script>

相关文章