原文:【百度地图API】交你如何用百度地图搜索自己的数据!不需数据库!

摘要:

  我有一定的房产数据,还有银行数据。我想在百度地图上标注出来,并且能搜索到我这些数据。

  可是百度的数据库上并没有我的数据。我应该怎么办呢?

------------------------------------------------------------------------------------------

一、无需数据库,如何建立自己的地理信息表。

如果让初学者去建立数据库,那么意味着大家还要学习数据库,以及网站后端的知识。为了方便大家学习,使大家能够快速地掌握如何构建房产地图,银行地图等,酸奶小妹教大家一个“把数据存储在前端”,“搜索自己数据”的一个办法。(本文章要特别感谢不怕冷的小蚊子)

首先,我们需要为自己的数据建立一个数组,把它们存储起来。像这样。

  1. // 标注点数组 var BASEDATA = [ {title:"奥亚酒店",content:"北苑路169号",point:"116.422792|40.009471",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"珀丽酒店",content:"将台西路8号",point:"116.484289|39.97936",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"贵国酒店",content:"左家庄1号",point:"116.454494|39.964011",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"科通酒店",content:"民族园路8号院2号楼",point:"116.394601|39.987925",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"将台酒店",content:"酒仙桥路甲12号",point:"116.496024|39.976864",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"成宏酒店",content:"北四环东路惠新东桥西北侧",point:"116.429445|39.995392",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"华商酒店",content:"延静西里2号",point:"116.488962|39.921939",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"标华酒店",content:"北京市 朝阳区红庙路柴家湾1号",point:"116.489284|39.92104",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"万程酒店",content:"天坛路89号",point:"116.411762|39.89457",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"黎昌酒店",content:"永定门外彭庄乙58号",point:"116.393532|39.876272",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"北京银行",content:"北京市海淀区白石桥路39号",point:"116.329593|39.952398",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"海淀银行",content:"丹棱街16西门",point:"116.315551|39.984388",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"北京银行",content:"北京市西城区文津街附近",point:"116.391713|39.929007",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"首都银行",content:"东三环南路88号",point:"116.469899|39.87684",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"国家银行",content:"中关村南大街33号",point:"116.331292|39.949031",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"崇文区银行",content:"北京市崇文区花市大街113号(乐天玛特超市旁)的敕建火德真君庙内",point:"116.427671|39.903568",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"朝阳区银行",content:"北京市朝阳区朝外小庄金台里17号",point:"116.47766|39.922295",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"宣武区银行",content:"教子胡同8号",point:"116.374561|39.894302",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"东城区银行",content:"交道口东大街85号",point:"116.41927|39.9474",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}}, {title:"西城区银行",content:"北京市西城区后广平胡同26号",point:"116.368099|39.942332",isOpen:,icon:{w:,h:,l:,t:,x:,lb:}} ]

注意:这部分是写在js里的。

其中,title是信息窗口打开后的标题,同时也是label标签的取值;

content是信息窗口的内容;

point是经纬度,请使用百度坐标(获取地址:http://dev.baidu.com/wiki/static/map/API/tool/getPoint/);

isopen是控制信息窗口是否打开的开关;

icon里的选项是控制marker图片的,width是宽、hight是高等等。

二、如何查找,并显示自己的数据

你需要在html中写一个搜索框,一个搜索按钮。

  1. <p> <input id="keyword" type="text" style="width:150px;" value="银行"/> <input type="button" value="搜索" onclick="search('type','show','keyword')"/></p>

搜索框,需要一个id,例如keyword来传递要搜索的参数。我写了银行。本案例中,由于有酒店数据,你还可以写酒店。

搜索按钮,上面需要一个点击事件onclick="search('type','show','keyword')"。根据type类型、show是否显示、keyword关键词来做搜索。

那么,当搜索的内容,就是id=keyword里面的keyword和我自己的数据,就是步骤一里的数组,相同时,我就创建一个marker标注,并且默认打开它的信息窗口。

  1. 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 = ; i < t_o.length; i++){ if(t_o[i].checked){ t_v = t_o[i].value; } } for(var i = ; 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 }

三、全部源代码


为了更加符合用户的搜索习惯,我设计了精确超找、和模糊查找两种情况。

精确查找:就是用户输入的keyword,和我数据库里的一摸一样 时,就打开信息窗口。这时候一般只能打开一个。因为你自己的数据应该不会有重复的。

模糊查找:比如查找酒店,会显示全部的酒店。比如查找银行,会显示全部的银行数据。默认打开第一个的信息窗口。

为了方便大家看到我添加进去的数据信息,这里还设计了“仅查找到的内容”和“显示所有的内容”。

仅查找到的内容:用户搜什么,就显示出什么来。

显示所有的内容:显示我全部添加的数据。

全部源代码在这里,我减去了很多数据。大家可以自己添加。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自家数据+前端搜索</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p>
二选一:
<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>
</p>
<p>二选一:

<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>
</p>
<p>
<input id="keyword" type="text" style="width:150px;" value="银行"/>
<input type="button" value="搜索" onclick="search('type','show','keyword')"/>
</p>
</body>
</html>
<script type="text/javascript">
// 标注点数组
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:"北京市海淀区白石桥路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}},
]

//创建和初始化地图函数:
function initMap(){
window.map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.412318,39.887037),12);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
window.searchClass = new SearchClass();
searchClass.setData(BASEDATA)
var dd = searchClass.search({k:"title",d:"银行",t:"more",s:""});//t:{single|more},s{all|!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 iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
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://openapi.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset: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>

四、示例运行请点击以下网址

http://dev.baidu.com/wiki/static/map/API/examples/?v=1.1&3_6#3&6

【百度地图API】交你如何用百度地图搜索自己的数据!不需数据库!的更多相关文章

  1. 【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点?如天安门附近所有的餐厅、加油站、宾馆、大厦等

    原文:[百度地图API]如何用圆形搜索获取中心点周围100米内全部关键点?如天安门附近所有的餐厅.加油站.宾馆.大厦等 摘要: 在LBS上有这样一个常用的功能,查找附近所有的关键点(POI点,比如标志 ...

  2. 【百度地图API】——如何用label制作简易的房产标签

    原文:[百度地图API]--如何用label制作简易的房产标签 摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产 ...

  3. 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  4. 【百度地图API】如何根据摩卡托坐标进行POI查询,和计算两点距离

    原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离 摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...

  5. 【百度地图API】让用户选择起点和终点的驾车导航

    原文:[百度地图API]让用户选择起点和终点的驾车导航 摘要: 如果用户搜索“从机场到火车站”,使用驾车导航DrivingRoute会默认显示一条结果.但同一个城市可能有多个机场和火车站,那么,如何用 ...

  6. 用百度地图API分析打交通大数据

    百度地图API, 文档不全,例子不细致. 在网上还没有太多有用的例子.比如说下面几个需求的解决方案就找不到: 1. 如何用百度地图API查询一个地点的经纬度. 2. 如何用百度地图通过一个经纬度查询商 ...

  7. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

  8. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  9. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

随机推荐

  1. 菜鸟教程工具(三)——Maven自己主动部署Tomcat

    书连接至背面,在博客上,他介绍了如何使用Maven该项目包,这篇文章说,关于如何使用Maven会踢war部署包Tomcat.而不是手动copy过去. 眼下比較流行的方式有两种:一种是利用Tomcat官 ...

  2. 接近带给你AngularJS - 经验说明示例

    接近带给你AngularJS列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

  3. 算法 《霍纳的方法java实践》

    [历史背景] 霍纳的方法是中国南宋时期的数学家秦九韶表述求解一元高次多项式的值的算法--正负开方术. 它也能够配合牛顿法用来求解一元高次多项式的根.在西方被称作霍纳算法(Horner algorith ...

  4. 如何识别SQL Server中的IO瓶颈

    原文:如何识别SQL Server中的IO瓶颈 原文出自: http://www.mssqltips.com/sqlservertip/2329/how-to-identify-io-bottlene ...

  5. HTML5 transform三维立方体(随着旋转的效果)

    为了得到更好的把握transform精华.因此,我们决定完成三维立方体模型,可以实现360无死三维旋转作用. 但旋转更难推断每侧视图的序列.然而,完美的解决方案,我希望有人能回答. 源代码直接贡献的朋 ...

  6. 6-06. 理性任务调度(25)(拓扑排序啊 ZJU_PAT)

    主题链接:http://pat.zju.edu.cn/contests/ds/6-06 假定一个project项目由一组子任务构成,子任务之间有的能够并行运行.有的必须在完毕了其他一些子任务后才干运行 ...

  7. 移动端 常见问题整理 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

    使用iScroll时,input等不能输入内容的解决方法 <script> function allowFormsInIscroll(){ [].slice.call(document.q ...

  8. 推荐2一个在Java编码过程中得心应手的工具

    推荐2在编码过程中的减小不仅编码的量,挺easy工具上手:可适用Java反思与单探头Assert. 1 Mirror:Java反思 简单介绍 官网:http://projetos.vidageek.n ...

  9. EF操作sqlite数据库时的项目兼容性问题

    问题:vs2015打不开vs2010建的操作sqlite的实体数据模型edmx文件 原因: 当前电脑必须先安装:驱动库及sqlite的vs拓展 正常情况下安装驱动和拓展后,vs2015就应该可以正常打 ...

  10. 深入理解Linux修改hostname(转)

    当我觉得对Linux系统下修改hostname已经非常熟悉的时候,今天碰到了几个个问题,这几个问题给我好好上了一课,很多知识点,当你觉得你已经掌握的时候,其实你了解的还只是皮毛.技术活,切勿浅尝则止! ...