百度地图api窗口信息自定义
百度地图加载完后，完全可以用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>
百度地图api窗口信息自定义的更多相关文章
- 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
- 百度地图点击地图显示地址详情的默认方法怎么关闭，去掉百度地图api图标信息
去掉百度地图api图标信息 调用百度地图API时,如果想去掉百度的logo,只需要在css里设置: <style> .anchorBL{display:none} </style&g ...
- 百度地图API如何给自定义覆盖物添加事件
摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...
- 百度地图api之如何自定义标注图标
在百度地图api中,默认的地图图标是一个红色的椭圆形.但是在项目中常常要求我们建立自己的图标,类似于我的这个 操作很简单,分如下几步进行 步骤一:先ps一个图标,大小要合适,如果要背景透明的,记得保存 ...
- 百度地图API 海量点 自定义添加信息
<!--添加百度地图--> <script type="text/javascript" src="http://api.map.baidu.com/a ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
- 【百度地图API】建立全国银行位置查询系统（五）——如何更改百度地图的信息窗口内容？
原文:[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房.去哪儿网等大型房产.旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是 ...
- 百度地图API 批量添加 带检索功能的信息窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 百度地图API显示多个标注点并添加百度样式检索窗口
原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...
随机推荐
- document.getElementById的简便方式
封装自己的元素获取方法,使元素获取变得简便 注意:1.应该要防止定义的被重写,可将同名的重新定义 2.可将封装的对象置为全局对象,方便使用 通过id查找单个元素 封装方式: //通过id查找单个元 ...
- 固定IP和绑定了MAC,可以在设置无线路由器供笔记本电脑和平板上网吗?
固定IP和绑定了MAC,可以在设置无线路由器供笔记本电脑和平板上网吗? 这跟我们单位一样.很简单:首先要占一个 IP/MAC ,能上外网的,这首先要有,谁要肯给地址,我们这儿领导才有呢.我是网管,当然 ...
- iconv gbk字符转utf8字符
直接上代码 bool gbk2utf8(const char* src, char* dest, size_t inlen) { const char *inbuf = src; size_t out ...
- VS2015接口智能提示少了异常信息 怎么破~
问题:我想让VS2015提示的时候也显示关于“异常”的批注信息,亲们 如何破? 下图是VS3013的提示 下图是VS2015的提示 下图是接口注释
- 简单的Goto运算演示程序
/* * 该程序用于计算某个项集的Goto集 * RexfieldVon * 2013年8月11日2:34:50 */ #include <stdio.h> #include <st ...
- 调查：Java程序员最亲睐的Web框架
这是关于Java的第二个调查,第一个调查请点这里查看. 这一次,我们要讨论的是web框架. 只有少数几种语言像Java一样提供了各种各样的web框架,上面的统计图就是一个证据.下面是其他开发者所使用w ...
- iOS10相机等崩溃
当使用iOS10使用相机时会出现崩溃 This app has crashed because it attempted to access privacy-sensitive data withou ...
- Facebook 开源安卓版 React Native，开发者可将相同代码用于网页和 iOS 应用开发
转自:http://mt.sohu.com/20150915/n421177212.shtml Facebook 创建了React Java 库,这样,Facebook 的工程团队就可以用相同的代码给 ...
- Android 网络框架---Volley
/** * Volley 可以同时请求多个,允许高并发 * 特性: * 1.JSON.图片等的异步下载 * 2.网络请求的排序(Scheduling) * 3.网络请求的优先级处理 * 4.缓存 * ...
- Fragment 回退栈 传递参数，点击切换图片使用Fragment ListView
Fragment回退栈 类似与Android系统为Activity维护一个任务栈,我们也可以通过Activity维护一个回退栈来保存每次Fragment事务发生的变化. 如果你将Fragment任务 ...