百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>15.1</title>
</head>
<body>
<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 type="button" onclick="reset()" value="重置数据" /></br>
<input id="keyword" type="text" style="width:150px;" value=""/>
<input type="button" value="搜索" onclick="search('type','keyword')"/>
</div>
</body>
</html>
<script type="text/javascript">
// 标注点数组 json
var BASEDATA = [
{ title: "奥亚酒店", content: "北苑路169号", point: "116.422792|40.009471", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "珀丽酒店", content: "将台西路8号", point: "116.484289|39.97936", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "贵国酒店", content: "左家庄1号", point: "116.454494|39.964011", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "科通酒店", content: "民族园路8号院2号楼", point: "116.394601|39.987925", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "将台酒店", content: "酒仙桥路甲12号", point: "116.496024|39.976864", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "成宏酒店", content: "北四环东路惠新东桥西北侧", point: "116.429445|39.995392", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "华商酒店", content: "延静西里2号", point: "116.488962|39.921939", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "标华酒店", content: "北京市 朝阳区红庙路柴家湾1号", point: "116.489284|39.92104", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "万程酒店", content: "天坛路89号", point: "116.411762|39.89457", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "黎昌酒店", content: "永定门外彭庄乙58号", point: "116.393532|39.876272", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "北京图书馆", content: "北京市海淀区白石桥路39号", point: "116.329593|39.952398", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "海淀图书馆", content: "丹棱街16西门", point: "116.315551|39.984388", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "北京图书馆", content: "北京市西城区文津街附近", point: "116.391713|39.929007", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "首都图书馆", content: "东三环南路88号", point: "116.469899|39.87684", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "国家图书馆", content: "中关村南大街33号", point: "116.331292|39.949031", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "崇文区图书馆", content: "北京市崇文区花市大街113号（乐天玛特超市旁）的敕建火德真君庙内", point: "116.427671|39.903568", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "朝阳区图书馆", content: "北京市朝阳区朝外小庄金台里17号", point: "116.47766|39.922295", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "宣武区图书馆", content: "教子胡同8号", point: "116.374561|39.894302", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "东城区图书馆", content: "交道口东大街85号", point: "116.41927|39.9474", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" },
{ title: "西城区图书馆", content: "北京市西城区后广平胡同26号", point: "116.368099|39.942332", isOpen: 0, icon: "http://static.blog.csdn.net/images/medal/holdon_s.gif" }
] //创建和初始化地图函数：
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)
reset();
} //搜索方法 param{searchTypeRadio_name：搜索radio的名字,keyword_name:搜索文本框的id}
window.search = function (searchTypeRadio_name, keyword_name) {
//获取页面dom
var searchType = document.getElementsByName(searchTypeRadio_name);
var keyword = document.getElementById(keyword_name).value;
//获取dom的值
var isLikeSearch;
for (var i = 0; i < searchType.length; i++) {
if (searchType[i].checked) {
isLikeSearch = searchType[i].value;
}
}
//开始搜索
searchClass.trim(isLikeSearch) == "" && (t_v = "single"); //去掉搜索关键字的html标签
var dd = searchClass.search({ k: "title", d: keyword, t: isLikeSearch, s: "" });
addMarker(dd); //向地图中添加marker
}
//重置返回所有结果
window.reset = function () {
//s:{''只返回找到的结果|all返回所有的}
var dd = searchClass.search({ k: "title", d: "显示全部", t: "single", s: "all" });
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 iconImg = new BMap.Icon(json.icon, new BMap.Size(22, 22));
var marker = new BMap.Marker(point, { icon: iconImg });
//var iw = createInfoWindow(json);
var label = new BMap.Label(json.title, { "offset": new BMap.Size(22, 22) });
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor: "#808080",
color: "#333",
cursor: "pointer"
}); (function () {
var _json = json;
var _iw = createInfoWindow(_json);
var _marker = marker;
_marker.addEventListener("click", function () {
this.openInfoWindow(_iw);
});
_iw.addEventListener("open", function () {
_marker.getLabel().hide();
})
_iw.addEventListener("close", function () {
_marker.getLabel().show();
})
label.addEventListener("click", function () {
_marker.openInfoWindow(_iw);
})
if (!!json.isOpen) {
label.hide();
_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("http://dev.baidu.com/wiki/static/map/API/img/ico-marker.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}
// rule = {k:"名字",d:"搜索关键字",t:{single名字精确查找|more名字模糊匹配查找},s{''只返回找到的结果|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进阶教程-用户自定义数据(标记和搜索)7.html的更多相关文章
- 百度地图Api进阶教程-点击生成和拖动标注4.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-实例高级操作8.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-基础地图示例1.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图Api进阶教程-弹出信息窗口5.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图Api进阶教程-创建标注和自定义标注3.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图Api进阶教程-默认控件和自定义控件2.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图Api进阶教程-点聚合9.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 【百度地图API】如何区分地址解析和智能搜索？
原文:[百度地图API]如何区分地址解析和智能搜索? 摘要: 很多用户一直无法区分地址解析geocoder和智能搜索localsearch的使用场景.该文章用一个详尽的示例,充分展示了这两个类,共5种 ...
随机推荐
- ubuntu14.4.4安装smb服务实现文件共享
1.软件安装,ubuntu14需要安装的软件有3个 安装服务前养成习惯 sudo apt-get upgrade 首先切换到超级用户 su - root sudo apt-get install s ...
- 基础003_V7-Memory Resources
一.综述 参考ug473.pdf. 常用Memory 资源: 在IP核中,Block memory(distributed memory为CLB中的资源): 通常选用Native,而不用AXI接口: ...
- haproxy 关闭ssl3
在使用的过程中,我们发现在用IE浏览器的时候 我们设置成 然后我们的网站会出现部分页面不出来 然后我们也发现在扫面网站链接的时候 所以当务之急是关闭ssl3 我这里的反向代理使用的是haproxy 版 ...
- 复习：JSP基本的语法（JSP凝视 + JSP指令 + JSP脚本元素 + JSP动作元素）
JSP原理: 1. 对于每个请求.jsp容器都会创建一个新的线程来处理它: 2. Servlet容器载入jsp后转换成的servlet(.class文件)是常驻内存的,所以对应速度一般比較 ...
- 设计模式-建造者模式（Builder Pattern)
建造者模式(Builder Pattern):将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 建造者模式要求建造过程中是稳定的. Android 用到的 Builder 模 ...
- ios 关于屏幕旋转和屏幕晃动
内置加速计是智能手机最酷的特性之一,ios可以通过这个小设备知道用户握持手机的方式,以及用户是否移动了手机,ios使用加速计处理自动旋转,并且许多游戏都是用它作为控制机制,它还可以用于检测摇动和其他突 ...
- VS2015 调试中断点突然失效的解决办法、VS调试时关闭调试让浏览器继续保留页面
VS2010 调试中断点突然失效的解决办法 问题描述:在调试前加了断点,但debug时红色的断点变成透明的圆圈加一个感叹号,执行到该处时也不会停止. 这个问题遇到过几次了,前几次都没怎么注意,有时候是 ...
- EditText: EditText自动获取焦点并弹出键盘&EditText不自动获取焦点并且不会弹出键盘
1.EditText不自动获取焦点并且不会弹出键盘 找到EditText的父控件,设置其父控件为: Parent.setFocusable(true); Parent.setFocusableInTo ...
- Word中MathType公式与LaTeX公式的转换
1. 对Word文档中用MathType输入的公式,在word中,选中mathtype公式,按住“Alt+\”键,可以将MathType公式转换成Latex格式. 2. 同样,将Latex格式的公式代 ...
- Zend Studio 12 windows 无限期试用
安装: 1.下载最新版本Zend Studio:http://downloads.zend.com/studio-eclipse/12.0.0/ZendStudio-12.0.0-win32.win3 ...