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

本文涉及的产品
应用型负载均衡 ALB,每月750个小时 15LCU
传统型负载均衡 CLB,每月750个小时 15LCU
网络型负载均衡 NLB,每月750个小时 15LCU
简介: 原文:【百度地图API】交你如何用百度地图搜索自己的数据!不需数据库!摘要:   我有一定的房产数据,还有银行数据。我想在百度地图上标注出来,并且能搜索到我这些数据。   可是百度的数据库上并没有我的数据。
原文: 【百度地图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 }}
]

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

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

content是信息窗口的内容;

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

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

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

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

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

< 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标注,并且默认打开它的信息窗口。

 

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
}

三、全部源代码


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

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

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

img_25e1987d33a8dcceffe8abc4f2f7f601.jpg

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

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

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

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

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif View Code
< 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

相关实践学习
SLB负载均衡实践
本场景通过使用阿里云负载均衡 SLB 以及对负载均衡 SLB 后端服务器 ECS 的权重进行修改,快速解决服务器响应速度慢的问题
负载均衡入门与产品使用指南
负载均衡(Server Load Balancer)是对多台云服务器进行流量分发的负载均衡服务,可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应用系统的可用性。 本课程主要介绍负载均衡的相关技术以及阿里云负载均衡产品的使用方法。
目录
相关文章
|
2天前
|
前端开发 JavaScript 数据库
获取数据库中字段的数据作为下拉框选项
获取数据库中字段的数据作为下拉框选项
25 5
|
2天前
|
数据采集 数据可视化 前端开发
怎么通过API获取电竞赛事实时数据
选择合适的电竞数据API是开发电竞应用的关键。主流API包括OP.GG、Liquipedia、Stratz、Riot Games和熊猫比分,涵盖LOL、DOTA2等游戏的实时数据。注册并获取API密钥后,需仔细阅读文档,了解资源、请求方法、必需参数及响应格式。编写代码调用API时,注意优化请求频率,避免封禁。最后,通过Web界面或可视化工具展示数据,如React/D3.js、Tableau等。示例代码展示了如何使用熊猫比分API获取即将开始的比赛信息。
|
10天前
|
存储 人工智能 API
(Elasticsearch)使用阿里云 infererence API 及 semantic text 进行向量搜索
本文展示了如何使用阿里云 infererence API 及 semantic text 进行向量搜索。
|
9天前
|
数据采集 监控 数据挖掘
常用电商商品数据API接口(item get)概述,数据分析以及上货
电商商品数据API接口(item get)是电商平台上用于提供商品详细信息的接口。这些接口允许开发者或系统以编程方式获取商品的详细信息,包括但不限于商品的标题、价格、库存、图片、销量、规格参数、用户评价等。这些信息对于电商业务来说至关重要,是商品数据分析、价格监控、上货策略制定等工作的基础。
|
14天前
|
机器学习/深度学习 API 数据库
淘宝拍立淘按图搜索商品API接口详解
拍立淘按图搜索商品API接口提供了一种通过上传商品图片来搜索相似或相同商品的功能。用户只需上传一张商品图片,系统通过图像识别技术对该图片进行分析和处理,提取出商品的特征信息,并在商品数据库中进行匹配搜索,最终返回与上传图片相似或相同的商品列表。这一功能广泛应用于电商平台、购物应用以及图像搜索等领域,极大地提升了用户的购物体验。
|
27天前
|
API 网络安全
发送UDP数据免费API接口教程
此API用于向指定主机发送UDP数据,支持POST或GET请求。需提供用户ID、密钥、接收IP及端口、数据内容等参数。返回状态码和信息提示。示例中含公共ID与KEY,建议使用个人凭证以提高调用频率。
45 13
|
27天前
|
网络协议 API 网络安全
发送TCP数据免费API接口教程
此API用于向指定主机发送TCP数据,支持POST/GET请求,需提供用户ID、KEY、接收IP、端口及数据内容。返回状态码和信息提示,示例如下:{&quot;code&quot;:200,&quot;msg&quot;:&quot;发送成功!&quot;}。详情见:https://www.apihz.cn/api/datacstcp.html
36 11
|
21天前
|
机器学习/深度学习 搜索推荐 API
淘宝/天猫按图搜索(拍立淘)API的深度解析与应用实践
在数字化时代,电商行业迅速发展,个性化、便捷性和高效性成为消费者新需求。淘宝/天猫推出的拍立淘API,利用图像识别技术,提供精准的购物搜索体验。本文深入探讨其原理、优势、应用场景及实现方法,助力电商技术和用户体验提升。
|
27天前
|
API 数据安全/隐私保护 开发者
实时获取小红书详情 API 数据
小红书详情API数据获取指南:注册开发者账号,创建应用并申请接口权限,构建请求获取笔记详情,使用Python等语言处理响应数据。需遵守使用规则,注意调用频率和数据安全。
|
3天前
|
存储 Oracle 关系型数据库
数据库传奇:MySQL创世之父的两千金My、Maria
《数据库传奇:MySQL创世之父的两千金My、Maria》介绍了MySQL的发展历程及其分支MariaDB。MySQL由Michael Widenius等人于1994年创建,现归Oracle所有,广泛应用于阿里巴巴、腾讯等企业。2009年,Widenius因担心Oracle收购影响MySQL的开源性,创建了MariaDB,提供额外功能和改进。维基百科、Google等已逐步替换为MariaDB,以确保更好的性能和社区支持。掌握MariaDB作为备用方案,对未来发展至关重要。
13 3